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

swarm-ui: create-agent layout fills the page width, centered

Browse source 
mara: the two cards were neither centered nor filling the space in
two-column mode. Dropped the page's own max-width entirely — Panel
already has no width opinion, and once both cards are equal-width
flex children there's no reason for an extra cap between them and
.shell-body's own 60em/centered column. Removed the now-pointless
wrapper div along with it.

Checked centered + filling behaviour at both a normal (1200px) and an
ultra-wide (1600px) viewport, and narrow-viewport stacking still
works.
This commit is contained in:
iris 2026-08-19 14:55:44 +02:00 • committed by mara
commit 1207a0e282
2 changed files with 85 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,28 +6,25 @@
looked misaligned — mara: "make it a col". Reuses the same base16
slots (../theme.css) every other component draws from.
`.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 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`
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;
}
This layout dropped an explicit page `max-width` after a few rounds:
first added so bare `Panel` (no width opinion of its own) wouldn't
fill `.shell-body`'s full 60em column behind a narrow form (the
original "weird empty space" complaint), then widened for two panels
side by side — but once both were equal-width flex children that cap
itself became "doesn't fill the space" (mara: "the cards are neither
centered nor fill the space tho"). Removing it lets the row fill
`.shell-body`'s own width like most pages — nothing sits off-center
once nothing is narrower than the row.
`.create-agent-form-col`/`.create-agent-info-col` are equal-sized
(`flex: 1 1 0` — zero basis so the 1.5em `gap` splits the row evenly,
not each column keeping its natural content width) per mara's "both
cards should be equal sized". `min-width` is the wrap threshold below
which the row goes single-column instead (info card moving under the
form) — no separate media query needed. Inputs fill their whole
column now too ("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-layout {
display: flex;
flex-wrap: wrap;