From 1d917e7c31be18046c69d632cbe7b32fc4440055 Mon Sep 17 00:00:00 2001
From: Yichen Jiang <jyc132780208@sina.com>
Date: Wed, 5 Aug 2026 19:07:51 +0800
Subject: [PATCH] fix(web): give the settings panel one height, taken from the
 viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sections differ by hundreds of pixels — a short preferences list against
the composition editor — and the 600px panel served both badly: the
list left a wide empty band, the editor cramped a YAML file into a
16-row box with dead space under it.

The panel is now `min(800px, 100vh - 48px)`: one height for every
section, whatever does not fit scrolls where it already did. The
composition editor takes the column's full height rather than a fixed
row count, so the extra space reaches the text instead of the gap.

Refresh the settings goldens the preset section's nav entry had made
stale.
---
 .../src/client/AgentPresetSection.module.css  | 25 +++++++++++++++++++
 .../src/client/AgentPresetSection.tsx         |  4 +--
 .../src/client/SettingsRoot.module.css        |  9 ++++---
 .../preset/agent-presets/README.i18n.yaml     |  4 +--
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/packages/client/ui-agent-preset/src/client/AgentPresetSection.module.css b/packages/client/ui-agent-preset/src/client/AgentPresetSection.module.css
index cfde11ee90..74f37266f8 100644
--- a/packages/client/ui-agent-preset/src/client/AgentPresetSection.module.css
+++ b/packages/client/ui-agent-preset/src/client/AgentPresetSection.module.css
@@ -6,6 +6,31 @@
   color: var(--dsw-alias-label-primary);
 }
 
+/* Editing form: take the settings column's whole height so the composition
+   gets the space the panel has, instead of a fixed-row box with an empty band
+   under it. The list keeps the default flow — a card grid pinned to the top
+   reads as a list, while a stretched one would drift its rows apart. */
+.sectionFill {
+  height: 100%;
+}
+
+.sectionFill .editor {
+  flex: 1;
+  min-height: 0;
+}
+
+.sectionFill .codeField {
+  flex: 1;
+  min-height: 0;
+}
+
+.sectionFill .codeField .code {
+  flex: 1;
+  min-height: 160px;
+  /* The drag handle would fight the flex height it is nested in. */
+  resize: none;
+}
+
 .title {
   margin: 0;
   font-size: 18px;
diff --git a/packages/client/ui-agent-preset/src/client/AgentPresetSection.tsx b/packages/client/ui-agent-preset/src/client/AgentPresetSection.tsx
index b7e9ab153d..da9eac9f39 100644
--- a/packages/client/ui-agent-preset/src/client/AgentPresetSection.tsx
+++ b/packages/client/ui-agent-preset/src/client/AgentPresetSection.tsx
@@ -112,7 +112,7 @@ function Editor({ draft, blocker, t, actions }: EditorProps): ReactNode {
         )
         : null}
       {draft.writable ? null : <p className={css.notice}>{t('readOnlyNotice')}</p>}
-      <label className={css.field}>
+      <label className={`${css.field} ${css.codeField}`}>
         <span className={css.fieldLabel}>{t('composition')}</span>
         <textarea
           className={css.code}
@@ -188,7 +188,7 @@ export function AgentPresetSection(props: AgentPresetSectionProps): ReactNode {
       setName: props.setName,
     }
     return (
-      <div className={css.section}>
+      <div className={`${css.section} ${css.sectionFill}`}>
         <div className={css.editorBar}>
           <button type="button" className={css.backButton} onClick={() => { props.close() }}>
             {`← ${t('backToList')}`}
diff --git a/packages/client/ui-settings/src/client/SettingsRoot.module.css b/packages/client/ui-settings/src/client/SettingsRoot.module.css
index 72c188e019..885882f246 100644
--- a/packages/client/ui-settings/src/client/SettingsRoot.module.css
+++ b/packages/client/ui-settings/src/client/SettingsRoot.module.css
@@ -63,15 +63,18 @@
 }
 
 /* Panel (figma Settings 501:29947): r24, white, lv3 shadow (figma effects
-   match --dsw-shadow-lv3 exactly); figma's 1080x700 is shrunk to 800x600. */
+   match --dsw-shadow-lv3 exactly); figma's 1080x700 is shrunk to 800 wide.
+   One height for every section, taken from the viewport rather than the
+   content: sections differ by hundreds of pixels (a settings list against the
+   composition editor), and a content-sized panel would resize under the
+   pointer on every nav click. Whatever does not fit scrolls in `.options`. */
 .panel {
   position: relative;
   z-index: 1;
   display: flex;
   width: 800px;
-  height: 600px;
+  height: min(800px, calc(100vh - 48px));
   max-width: calc(100vw - 48px);
-  max-height: calc(100vh - 48px);
   border-radius: 24px;
   overflow: hidden;
   background: var(--dsw-alias-bg-layer-2);
diff --git a/packages/preset/agent-presets/README.i18n.yaml b/packages/preset/agent-presets/README.i18n.yaml
index 54206f2675..2de3b390ca 100644
--- a/packages/preset/agent-presets/README.i18n.yaml
+++ b/packages/preset/agent-presets/README.i18n.yaml
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/preset/agent-presets/README.md
-README.md: b60d89b6dcda97a7570680072195231885fd0d45
-README.zh.md: f2485663ada031a9e8fa5ce3a06327e6cbc1de10
+README.md: b6f00366ef319637d19cccb513d41dbff1eaa5e1
+README.zh.md: f09fd89c2c9bfb08fafbdb47b80ebaf26ae42b47