From 11a76ae90fa349fb1a18c390f97d739b88929fb5 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Wed, 24 Sep 2025 18:27:26 +0800
Subject: [PATCH] fix(AgentModal): improve modal layout and fix description
 field position

Adjust modal height and overflow behavior
Move description textarea below prompt field for better logical flow
---
 .../components/Popups/agent/AgentModal.tsx    | 58 +++++++++++--------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/components/Popups/agent/AgentModal.tsx b/src/renderer/src/components/Popups/agent/AgentModal.tsx
index ebce1b05d2..8dec33d0ee 100644
--- a/src/renderer/src/components/Popups/agent/AgentModal.tsx
+++ b/src/renderer/src/components/Popups/agent/AgentModal.tsx
@@ -385,30 +385,38 @@ export const AgentModal: React.FC<Props> = ({ agent, trigger, isOpen: _isOpen, o
           {trigger.content}
         </div>
       )}
-      <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        classNames={{
+          base: 'max-h-[90vh]',
+          wrapper: 'overflow-hidden'
+        }}>
         <ModalContent>
           {(onClose) => (
             <>
               <ModalHeader>{isEditing(agent) ? t('agent.edit.title') : t('agent.add.title')}</ModalHeader>
-              <Form onSubmit={onSubmit} className="w-full">
-                <ModalBody className="w-full">
-                  <Select
-                    isRequired
-                    isDisabled={isEditing(agent)}
-                    selectionMode="single"
-                    selectedKeys={[form.type]}
-                    onChange={onAgentTypeChange}
-                    items={agentOptions}
-                    label={t('agent.type.label')}
-                    placeholder={t('agent.add.type.placeholder')}
-                    renderValue={renderOption}>
-                    {(option) => (
-                      <SelectItem key={option.key} textValue={option.label}>
-                        <Option option={option} />
-                      </SelectItem>
-                    )}
-                  </Select>
-                  <Input isRequired value={form.name} onValueChange={onNameChange} label={t('common.name')} />
+              <Form onSubmit={onSubmit} className="min-h-0 w-full shrink overflow-auto">
+                <ModalBody className="min-h-0 w-full flex-1 shrink overflow-auto">
+                  <div className="flex gap-2">
+                    <Select
+                      isRequired
+                      isDisabled={isEditing(agent)}
+                      selectionMode="single"
+                      selectedKeys={[form.type]}
+                      onChange={onAgentTypeChange}
+                      items={agentOptions}
+                      label={t('agent.type.label')}
+                      placeholder={t('agent.add.type.placeholder')}
+                      renderValue={renderOption}>
+                      {(option) => (
+                        <SelectItem key={option.key} textValue={option.label}>
+                          <Option option={option} />
+                        </SelectItem>
+                      )}
+                    </Select>
+                    <Input isRequired value={form.name} onValueChange={onNameChange} label={t('common.name')} />
+                  </div>
                   <Select
                     isRequired
                     selectionMode="single"
@@ -424,11 +432,6 @@ export const AgentModal: React.FC<Props> = ({ agent, trigger, isOpen: _isOpen, o
                       </SelectItem>
                     )}
                   </Select>
-                  <Textarea
-                    label={t('common.description')}
-                    value={form.description ?? ''}
-                    onValueChange={onDescChange}
-                  />
                   <Select
                     selectionMode="multiple"
                     selectedKeys={selectedToolKeys}
@@ -483,6 +486,11 @@ export const AgentModal: React.FC<Props> = ({ agent, trigger, isOpen: _isOpen, o
                     )}
                   </div>
                   <Textarea label={t('common.prompt')} value={form.instructions ?? ''} onValueChange={onInstChange} />
+                  <Textarea
+                    label={t('common.description')}
+                    value={form.description ?? ''}
+                    onValueChange={onDescChange}
+                  />
                 </ModalBody>
                 <ModalFooter className="w-full">
                   <Button onPress={onClose}>{t('common.close')}</Button>