swarm-ui: fix create-agent form field alignment and panel width

TextField and SelectField's shared FormField wrapper had no width of
its own, so inside the form's shrink-to-fit flex column each field's
input/select resolved its 'width: 100%' against its own shrunk
wrapper rather than a shared column width — two fields with
differently-long labels ended up with differently-wide controls.
FormField now caps its own width the same way the control already
does, so every field in a form lines up regardless of label length.

Also wrapped the page in a max-width container: Panel has no width
opinion of its own, so it filled the full page column, leaving a lot
of bare panel to the right of the ~16em-wide form.

frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx

@@ -125,44 +125,48 @@ export function CreateAgentPage() {
   }
 
   return (
-    <Panel title="create agent">
-      <p class="create-agent-intro">
-        Create a new agent's swarm-level identity. This only queues the job — check{' '}
-        <Link href="/jobs">jobs</Link> to watch it settle.
-      </p>
-      {hivesError && <ApiErrorPanel context="failed to load the hive list" problem={hivesError} />}
-      <form class="create-agent-form" onSubmit={submit}>
-        <TextField
-          id="agent-name"
-          label="agent name"
-          value={name}
-          pattern={NAME_PATTERN}
-          title="1-63 chars: lowercase letters, digits, hyphens"
-          required
-          onInput={setName}
-        />
-        <SelectField
-          id="agent-hive"
-          label="hive"
-          value={hive}
-          onChange={setHive}
-          options={hiveOptions}
-          required
-          disabled={!hivesReady}
-          placeholder={!hives ? 'loading…' : hives.length === 0 ? 'no hives configured' : 'select a hive'}
-        />
-        <Button variant="primary" type="submit" disabled={result.status === 'submitting' || !hivesReady}>
-          {result.status === 'submitting' ? 'creating…' : 'create'}
-        </Button>
-      </form>
-      {result.status === 'done' && (
-        <p class="create-agent-result create-agent-result-ok">
-          queued as job node #{result.nodeId} — <Link href="/jobs">watch it in jobs</Link>
+    <div class="create-agent-page">
+      <Panel title="create agent">
+        <p class="create-agent-intro">
+          Create a new agent's swarm-level identity. This only queues the job — check{' '}
+          <Link href="/jobs">jobs</Link> to watch it settle.
         </p>
-      )}
-      {result.status === 'error' && (
-        <ApiErrorPanel context="failed to queue" problem={result.problem} />
-      )}
-    </Panel>
+        {hivesError && <ApiErrorPanel context="failed to load the hive list" problem={hivesError} />}
+        <form class="create-agent-form" onSubmit={submit}>
+          <TextField
+            id="agent-name"
+            label="agent name"
+            value={name}
+            pattern={NAME_PATTERN}
+            title="1-63 chars: lowercase letters, digits, hyphens"
+            required
+            onInput={setName}
+          />
+          <SelectField
+            id="agent-hive"
+            label="hive"
+            value={hive}
+            onChange={setHive}
+            options={hiveOptions}
+            required
+            disabled={!hivesReady}
+            placeholder={
+              !hives ? 'loading…' : hives.length === 0 ? 'no hives configured' : 'select a hive'
+            }
+          />
+          <Button variant="primary" type="submit" disabled={result.status === 'submitting' || !hivesReady}>
+            {result.status === 'submitting' ? 'creating…' : 'create'}
+          </Button>
+        </form>
+        {result.status === 'done' && (
+          <p class="create-agent-result create-agent-result-ok">
+            queued as job node #{result.nodeId} — <Link href="/jobs">watch it in jobs</Link>
+          </p>
+        )}
+        {result.status === 'error' && (
+          <ApiErrorPanel context="failed to queue" problem={result.problem} />
+        )}
+      </Panel>
+    </div>
   );
 }