fix(web): give the settings panel one height, taken from the viewport

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.

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;

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')}`}

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);