swarm-ui: create-agent layout fills the page width, centered
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
mara
parent
3b339b2232
commit
1207a0e282
2 changed files with 85 additions and 90 deletions
|
|
@ -125,75 +125,73 @@ export function CreateAgentPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div class="create-agent-page">
|
||||
<div class="create-agent-layout">
|
||||
<div class="create-agent-form-col">
|
||||
<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.
|
||||
<div class="create-agent-layout">
|
||||
<div class="create-agent-form-col">
|
||||
<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>
|
||||
</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>
|
||||
</p>
|
||||
)}
|
||||
{result.status === 'error' && (
|
||||
<ApiErrorPanel context="failed to queue" problem={result.problem} />
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="create-agent-info-col">
|
||||
{/* 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. */}
|
||||
<Panel title="what this creates">
|
||||
<p class="create-agent-info-glyph" aria-hidden="true">
|
||||
🪪
|
||||
</p>
|
||||
<p>
|
||||
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{' '}
|
||||
<Link href="/jobs">jobs</Link>.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
)}
|
||||
{result.status === 'error' && (
|
||||
<ApiErrorPanel context="failed to queue" problem={result.problem} />
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="create-agent-info-col">
|
||||
{/* 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. */}
|
||||
<Panel title="what this creates">
|
||||
<p class="create-agent-info-glyph" aria-hidden="true">
|
||||
🪪
|
||||
</p>
|
||||
<p>
|
||||
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{' '}
|
||||
<Link href="/jobs">jobs</Link>.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue