From bfd3632f95b2d18eb985800bddaa4e317ac664c1 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Sat, 7 Mar 2026 14:24:26 +0800
Subject: [PATCH] fix(config): make api key modal input layout responsive

---
 .../config/VisualConfigEditor.module.scss     | 15 +++++++++++
 src/components/config/VisualConfigEditor.tsx  | 26 ++++++++++---------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/config/VisualConfigEditor.module.scss b/src/components/config/VisualConfigEditor.module.scss
index aeffb1e..78f5ef8 100644
--- a/src/components/config/VisualConfigEditor.module.scss
+++ b/src/components/config/VisualConfigEditor.module.scss
@@ -39,6 +39,16 @@
   align-items: center;
 }
 
+.apiKeyModalInputRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  :global(.input) {
+    flex: 1;
+  }
+}
+
 @media (max-width: 900px) {
   .payloadRuleModelRow,
   .payloadRuleModelRowProtocolFirst,
@@ -47,6 +57,11 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .apiKeyModalInputRow {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .payloadRowActionButton {
     width: 100%;
   }
diff --git a/src/components/config/VisualConfigEditor.tsx b/src/components/config/VisualConfigEditor.tsx
index 14066bd..7b0a45a 100644
--- a/src/components/config/VisualConfigEditor.tsx
+++ b/src/components/config/VisualConfigEditor.tsx
@@ -274,16 +274,16 @@ function ApiKeysCardEditor({
           </>
         }
       >
-        <Input
-          label={t('config_management.visual.api_keys.input_label')}
-          placeholder={t('config_management.visual.api_keys.input_placeholder')}
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          disabled={disabled}
-          error={formError || undefined}
-          hint={t('config_management.visual.api_keys.input_hint')}
-          style={{ paddingRight: 148 }}
-          rightElement={
+        <div className="form-group">
+          <label>{t('config_management.visual.api_keys.input_label')}</label>
+          <div className={styles.apiKeyModalInputRow}>
+            <input
+              className="input"
+              placeholder={t('config_management.visual.api_keys.input_placeholder')}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              disabled={disabled}
+            />
             <Button
               type="button"
               variant="secondary"
@@ -293,8 +293,10 @@ function ApiKeysCardEditor({
             >
               {t('config_management.visual.api_keys.generate')}
             </Button>
-          }
-        />
+          </div>
+          <div className="hint">{t('config_management.visual.api_keys.input_hint')}</div>
+          {formError && <div className="error-box">{formError}</div>}
+        </div>
       </Modal>
     </div>
   );