From 3b339b22320ef3e0e287aac18058340ff310d932 Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 19 Aug 2026 14:48:00 +0200 Subject: [PATCH] swarm-ui: equal-width create-agent cards, full-width inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit mara's follow-up: both cards should be the same size (flex: 1 1 0 instead of the form keeping its own narrower basis), and the form's inputs should fill the card rather than stopping at their old 16em cap. Dropped that cap from the shared form kit (.ui-form-control / .ui-form-field) entirely rather than overriding it per-page — the kit itself has no width opinion now, same as Panel already has none; a page that wants a narrower field caps its layout, not the kit. Checked ComponentsPage's standalone samples (no regression, just wider) and narrow-viewport stacking (still moves the explanation under the form). --- .../swarm-ui/src/pages/CreateAgentPage.css | 27 +++++++----- .../swarm-ui/src/ui/form-field/FormField.css | 42 ++++++++++--------- 2 files changed, 38 insertions(+), 31 deletions(-) diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css index 7316702d..0623fd6c 100644 --- a/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css +++ b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css @@ -9,16 +9,22 @@ `.create-agent-page` caps the whole layout's width: `Panel` has no width opinion of its own, so left unconstrained a single form panel filled `.shell-body`'s full 60em column — a lot of bare panel to the - right of a ~16em-wide form, the "weird empty space" mara flagged + right of a narrow form, the "weird empty space" mara flagged alongside the original field misalignment. The follow-up ask was to fill that space with something that explains the page rather than just narrowing it further — `.create-agent-layout` puts the form - beside a second, explanatory panel instead. `.create-agent-form-col` - keeps the same ~24em cap the single-panel version had (fields' own - 16em cap, ../ui/form-field/FormField.css, plus body padding and a - little breathing room); `.create-agent-info-col` takes the rest of - the row and wraps under the form on a narrow viewport (`flex-wrap`, - no separate media query needed). */ + beside a second, explanatory panel instead, `.create-agent-form-col` + and `.create-agent-info-col` sized equally (`flex: 1 1 0` — an equal + *basis* of zero so the 1.5em `gap` splits the remaining row width + evenly between them, rather than each keeping its own natural + content width) per mara's follow-up ("both cards should be equal + sized"). `min-width` on both is the wrap threshold: below it a card + would get uncomfortably narrow, so the row wraps to a single column + instead (`.create-agent-info-col` moving under the form) — no + separate media query needed. The form's own inputs now fill that + whole column width too (mara: "inputs should fill full card width") + — the kit's `.ui-form-control`/`.ui-form-field` dropped their old + 16em cap for exactly this (../ui/form-field/FormField.css). */ .create-agent-page { max-width: 44em; } @@ -28,11 +34,10 @@ align-items: flex-start; gap: 1.5em; } -.create-agent-form-col { - flex: 0 1 24em; -} +.create-agent-form-col, .create-agent-info-col { - flex: 1 1 16em; + flex: 1 1 0; + min-width: 16em; } .create-agent-info-glyph { margin: 0 0 0.5em; diff --git a/frontend/packages/swarm-ui/src/ui/form-field/FormField.css b/frontend/packages/swarm-ui/src/ui/form-field/FormField.css index a2365e9a..ed4f1393 100644 --- a/frontend/packages/swarm-ui/src/ui/form-field/FormField.css +++ b/frontend/packages/swarm-ui/src/ui/form-field/FormField.css @@ -1,31 +1,34 @@ /* — label stacked above its control, plus the shared `.ui-form-control` chrome every text/select input in the kit draws - from (one class, so the two never drift). `max-width` + `width: 100%` - rather than a fixed `width`: caps the control on a wide desktop - viewport without forcing an overflow on a narrow/touch one. - `min-height` is a touch-target floor (44px at the default 16px root - font — WCAG 2.5.5's minimum), not a visual choice — it's the same on - every control in the kit whether or not it's ever used on a touch - device, since the alternative is a component that behaves differently - per input method. Colours are the shared base16-derived vars + from (one class, so the two never drift). `width: 100%` fills + whichever container the caller gives it — the kit itself has no + opinion on a maximum width; a page that wants one narrower than its + own layout caps it at the layout level (`CreateAgentPage.css`'s + `.create-agent-form-col` is the existing example), same reasoning + `Panel` has no width opinion of its own either. `min-height` is a + touch-target floor (44px at the default 16px root font — WCAG + 2.5.5's minimum), not a visual choice — it's the same on every + control in the kit whether or not it's ever used on a touch device, + since the alternative is a component that behaves differently per + input method. Colours are the shared base16-derived vars (../../theme.css), never literal. - The field wrapper repeats `.ui-form-control`'s own `width: 100%; - max-width: 16em` rather than leaving the wrapper unconstrained: inside - a shrink-to-fit flex column (`CreateAgentPage`'s form is one), an - unconstrained wrapper sizes to its own content — and a `width: 100%` - *control* inside an auto-width wrapper resolves against that shrunk - width, not the intended 16em cap, so two fields with differently-long - labels ("agent name" vs "hive") ended up with differently-wide inputs — - the misalignment mara reported on the create-agent page. Matching the - two declarations here means every field's control width is driven by - the same fixed cap regardless of its label's length or its siblings'. */ + The field wrapper repeats `.ui-form-control`'s own `width: 100%` + rather than leaving the wrapper unconstrained: inside a shrink-to-fit + flex column (`CreateAgentPage`'s form is one), an unconstrained + wrapper sizes to its own content — and a `width: 100%` *control* + inside an auto-width wrapper resolves against that shrunk width, not + the container the page actually gave it, so two fields with + differently-long labels ("agent name" vs "hive") ended up with + differently-wide inputs — the misalignment mara reported on the + create-agent page. Matching the two declarations here means every + field's control width is driven by the same container width + regardless of its label's length or its siblings'. */ .ui-form-field { display: flex; flex-direction: column; gap: 0.3em; width: 100%; - max-width: 16em; } .ui-form-field-label { font-size: 0.85em; @@ -39,7 +42,6 @@ padding: 0.4em 0.6em; font: inherit; width: 100%; - max-width: 16em; box-sizing: border-box; min-height: 2.75em; }