refactor: improve modal ux

app/components/chat.tsx

@@ -911,6 +911,7 @@ export function Chat() {
                           const newMessage = await showPrompt(
                             Locale.Chat.Actions.Edit,
                             message.content,
+                            10,
                           );
                           chatStore.updateCurrentSession((session) => {
                             const m = session.messages.find(

app/components/ui-lib.module.scss

@@ -72,7 +72,9 @@
   box-shadow: var(--card-shadow);
   background-color: var(--white);
   border-radius: 12px;
-  width: 60vw;
+  width: 80vw;
+  max-width: 900px;
+  min-width: 300px;
   animation: slide-in ease 0.3s;
 
   --modal-padding: 20px;
@@ -242,7 +244,6 @@
   resize: none;
   outline: none;
   box-sizing: border-box;
-  min-height: 30vh;
 
   &:focus {
     border: 1px solid var(--primary);

app/components/ui-lib.tsx

@@ -321,6 +321,7 @@ export function showConfirm(content: any) {
 function PromptInput(props: {
   value: string;
   onChange: (value: string) => void;
+  rows?: number;
 }) {
   const [input, setInput] = useState(props.value);
   const onInput = (value: string) => {
@@ -334,11 +335,12 @@ function PromptInput(props: {
       autoFocus
       value={input}
       onInput={(e) => onInput(e.currentTarget.value)}
+      rows={props.rows ?? 3}
     ></textarea>
   );
 }
 
-export function showPrompt(content: any, value = "") {
+export function showPrompt(content: any, value = "", rows = 3) {
   const div = document.createElement("div");
   div.className = "modal-mask";
   document.body.appendChild(div);
@@ -386,6 +388,7 @@ export function showPrompt(content: any, value = "") {
         <PromptInput
           onChange={(val) => (userInput = val)}
           value={value}
+          rows={rows}
         ></PromptInput>
       </Modal>,
     );