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

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).

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`
+   beside a second, explanatory panel instead, `.create-agent-form-col`
-   keeps the same ~24em cap the single-panel version had (fields' own
+   and `.create-agent-info-col` sized equally (`flex: 1 1 0` — an equal
-   16em cap, ../ui/form-field/FormField.css, plus body padding and a
+   *basis* of zero so the 1.5em `gap` splits the remaining row width
-   little breathing room); `.create-agent-info-col` takes the rest of
+   evenly between them, rather than each keeping its own natural
-   the row and wraps under the form on a narrow viewport (`flex-wrap`,
+   content width) per mara's follow-up ("both cards should be equal
-   no separate media query needed). */
+   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 {
+.create-agent-form-col,
-  flex: 0 1 24em;
-}
 .create-agent-info-col {
-  flex: 1 1 16em;
+  flex: 1 1 0;
+  min-width: 16em;
 }
 .create-agent-info-glyph {
   margin: 0 0 0.5em;

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%`
+   from (one class, so the two never drift). `width: 100%` fills
-   rather than a fixed `width`: caps the control on a wide desktop
+   whichever container the caller gives it — the kit itself has no
-   viewport without forcing an overflow on a narrow/touch one.
+   opinion on a maximum width; a page that wants one narrower than its
-   `min-height` is a touch-target floor (44px at the default 16px root
+   own layout caps it at the layout level (`CreateAgentPage.css`'s
-   font — WCAG 2.5.5's minimum), not a visual choice — it's the same on
+   `.create-agent-form-col` is the existing example), same reasoning
-   every control in the kit whether or not it's ever used on a touch
+   `Panel` has no width opinion of its own either. `min-height` is a
-   device, since the alternative is a component that behaves differently
+   touch-target floor (44px at the default 16px root font — WCAG
-   per input method. Colours are the shared base16-derived vars
+   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%;
+   The field wrapper repeats `.ui-form-control`'s own `width: 100%`
-   max-width: 16em` rather than leaving the wrapper unconstrained: inside
+   rather than leaving the wrapper unconstrained: inside a shrink-to-fit
-   a shrink-to-fit flex column (`CreateAgentPage`'s form is one), an
+   flex column (`CreateAgentPage`'s form is one), an unconstrained
-   unconstrained wrapper sizes to its own content — and a `width: 100%`
+   wrapper sizes to its own content — and a `width: 100%` *control*
-   *control* inside an auto-width wrapper resolves against that shrunk
+   inside an auto-width wrapper resolves against that shrunk width, not
-   width, not the intended 16em cap, so two fields with differently-long
+   the container the page actually gave it, so two fields with
-   labels ("agent name" vs "hive") ended up with differently-wide inputs —
+   differently-long labels ("agent name" vs "hive") ended up with
-   the misalignment mara reported on the create-agent page. Matching the
+   differently-wide inputs — the misalignment mara reported on the
-   two declarations here means every field's control width is driven by
+   create-agent page. Matching the two declarations here means every
-   the same fixed cap regardless of its label's length or its siblings'. */
+   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;
 }