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 @@
 /* <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;
 }