From 1207a0e282c851f5e5d54074aae2220554935de3 Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 19 Aug 2026 14:55:44 +0200 Subject: [PATCH] swarm-ui: create-agent layout fills the page width, centered MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../swarm-ui/src/pages/CreateAgentPage.css | 41 +++--- .../swarm-ui/src/pages/CreateAgentPage.tsx | 134 +++++++++--------- 2 files changed, 85 insertions(+), 90 deletions(-) diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css index 0623fd6c..b1fe91a2 100644 --- a/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css +++ b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css @@ -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; diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx index 64e750cb..eaa22152 100644 --- a/frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx +++ b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx @@ -125,75 +125,73 @@ export function CreateAgentPage() { } return ( -
-
-
- -

- Create a new agent's swarm-level identity. This only queues the job — check{' '} - jobs to watch it settle. +

+
+ +

+ Create a new agent's swarm-level identity. This only queues the job — check{' '} + jobs to watch it settle. +

+ {hivesError && ( + + )} +
+ + + + + {result.status === 'done' && ( +

+ queued as job node #{result.nodeId} — watch it in jobs

- {hivesError && ( - - )} -
- - - - - {result.status === 'done' && ( -

- queued as job node #{result.nodeId} — watch it in jobs -

- )} - {result.status === 'error' && ( - - )} -
-
-
- {/* Describes the intended end state (a running agent), not today's - literal behaviour (deploying the container onto the hive isn't - wired up server-side yet — see this file's top comment) — - mara's explicit call on this copy: read as finished, not as a - running commentary on partial implementation. */} - - -

- Submitting this queues everything a new agent needs: a swarm-level identity, a - config repo on the forge with the operator added as a collaborator, and a container - running the agent on the hive you pick above. Watch it all settle on{' '} - jobs. -

- -
+ )} + {result.status === 'error' && ( + + )} + +
+
+ {/* Describes the intended end state (a running agent), not today's + literal behaviour (deploying the container onto the hive isn't + wired up server-side yet — see this file's top comment) — + mara's explicit call on this copy: read as finished, not as a + running commentary on partial implementation. */} + + +

+ Submitting this queues everything a new agent needs: a swarm-level identity, a config + repo on the forge with the operator added as a collaborator, and a container running + the agent on the hive you pick above. Watch it all settle on{' '} + jobs. +

+
);