vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

swarm-ui: equal-width create-agent cards, full-width inputs

Browse source 
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).
This commit is contained in:
iris 2026-08-19 14:48:00 +02:00 • committed by mara
commit 3b339b2232
2 changed files with 38 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/packages/swarm-ui/src/pages/CreateAgentPage.css
View file

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

42
frontend/packages/swarm-ui/src/ui/form-field/FormField.css
View file

@ -1,31 +1,34 @@
/* <FormField> — 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;
}