fix(ui): make payload visual editor responsive on mobile

package-lock.json

@@ -9,7 +9,6 @@
       "version": "0.0.0",
       "dependencies": {
         "@codemirror/lang-yaml": "^6.1.2",
-        "@openai/codex": "^0.98.0",
         "@uiw/react-codemirror": "^4.25.3",
         "axios": "^1.13.2",
         "chart.js": "^4.5.1",

package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@codemirror/lang-yaml": "^6.1.2",
-    "@openai/codex": "^0.98.0",
     "@uiw/react-codemirror": "^4.25.3",
     "axios": "^1.13.2",
     "chart.js": "^4.5.1",

src/components/config/VisualConfigEditor.module.scss

@@ -0,0 +1,37 @@
+.payloadRuleModelRow {
+  display: grid;
+  grid-template-columns: 1fr 160px auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.payloadRuleModelRowProtocolFirst {
+  grid-template-columns: 160px 1fr auto;
+}
+
+.payloadRuleParamRow {
+  display: grid;
+  grid-template-columns: 1fr 140px 1fr auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.payloadFilterModelRow {
+  display: grid;
+  grid-template-columns: 1fr 160px auto;
+  gap: 8px;
+  align-items: center;
+}
+
+@media (max-width: 900px) {
+  .payloadRuleModelRow,
+  .payloadRuleModelRowProtocolFirst,
+  .payloadRuleParamRow,
+  .payloadFilterModelRow {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .payloadRowActionButton {
+    width: 100%;
+  }
+}

src/components/config/VisualConfigEditor.tsx

@@ -6,6 +6,7 @@ import { Modal } from '@/components/ui/Modal';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import { IconChevronDown } from '@/components/ui/icons';
 import { ConfigSection } from '@/components/config/ConfigSection';
+import styles from './VisualConfigEditor.module.scss';
 import type {
   PayloadFilterRule,
   PayloadModelEntry,
@@ -358,7 +359,7 @@ function StringListEditor({
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       {items.map((item, index) => (
-        <div key={index} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <div key={index} style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
           <input
             className="input"
             placeholder={placeholder}
@@ -471,7 +472,15 @@ function PayloadRulesEditor({
             gap: 12,
           }}
         >
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              gap: 12,
+              flexWrap: 'wrap',
+            }}
+          >
             <div style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{t('config_management.visual.payload_rules.rule')} {ruleIndex + 1}</div>
             <Button variant="ghost" size="sm" onClick={() => removeRule(ruleIndex)} disabled={disabled}>
               {t('config_management.visual.common.delete')}
@@ -483,11 +492,9 @@ function PayloadRulesEditor({
             {(rule.models.length ? rule.models : []).map((model, modelIndex) => (
               <div
                 key={model.id}
-                style={{
+                className={[styles.payloadRuleModelRow, protocolFirst ? styles.payloadRuleModelRowProtocolFirst : '']
-                  display: 'grid',
+                  .filter(Boolean)
-                  gridTemplateColumns: protocolFirst ? '160px 1fr auto' : '1fr 160px auto',
+                  .join(' ')}
-                  gap: 8,
-                }}
               >
                 {protocolFirst ? (
                   <>
@@ -532,7 +539,13 @@ function PayloadRulesEditor({
                     />
                   </>
                 )}
-                <Button variant="ghost" size="sm" onClick={() => removeModel(ruleIndex, modelIndex)} disabled={disabled}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={styles.payloadRowActionButton}
+                  onClick={() => removeModel(ruleIndex, modelIndex)}
+                  disabled={disabled}
+                >
                   {t('config_management.visual.common.delete')}
                 </Button>
               </div>
@@ -547,7 +560,7 @@ function PayloadRulesEditor({
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
             <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>{t('config_management.visual.payload_rules.params')}</div>
             {(rule.params.length ? rule.params : []).map((param, paramIndex) => (
-              <div key={param.id} style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1fr auto', gap: 8 }}>
+              <div key={param.id} className={styles.payloadRuleParamRow}>
                 <input
                   className="input"
                   placeholder={t('config_management.visual.payload_rules.json_path')}
@@ -571,7 +584,13 @@ function PayloadRulesEditor({
                   onChange={(e) => updateParam(ruleIndex, paramIndex, { value: e.target.value })}
                   disabled={disabled}
                 />
-                <Button variant="ghost" size="sm" onClick={() => removeParam(ruleIndex, paramIndex)} disabled={disabled}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={styles.payloadRowActionButton}
+                  onClick={() => removeParam(ruleIndex, paramIndex)}
+                  disabled={disabled}
+                >
                   {t('config_management.visual.common.delete')}
                 </Button>
               </div>
@@ -658,7 +677,15 @@ function PayloadFilterRulesEditor({
             gap: 12,
           }}
         >
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              gap: 12,
+              flexWrap: 'wrap',
+            }}
+          >
             <div style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{t('config_management.visual.payload_rules.rule')} {ruleIndex + 1}</div>
             <Button variant="ghost" size="sm" onClick={() => removeRule(ruleIndex)} disabled={disabled}>
               {t('config_management.visual.common.delete')}
@@ -668,7 +695,7 @@ function PayloadFilterRulesEditor({
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
             <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>{t('config_management.visual.payload_rules.models')}</div>
             {rule.models.map((model, modelIndex) => (
-              <div key={model.id} style={{ display: 'grid', gridTemplateColumns: '1fr 160px auto', gap: 8 }}>
+              <div key={model.id} className={styles.payloadFilterModelRow}>
                 <input
                   className="input"
                   placeholder={t('config_management.visual.payload_rules.model_name')}
@@ -687,7 +714,13 @@ function PayloadFilterRulesEditor({
                     })
                   }
                 />
-                <Button variant="ghost" size="sm" onClick={() => removeModel(ruleIndex, modelIndex)} disabled={disabled}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={styles.payloadRowActionButton}
+                  onClick={() => removeModel(ruleIndex, modelIndex)}
+                  disabled={disabled}
+                >
                   {t('config_management.visual.common.delete')}
                 </Button>
               </div>