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

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;