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
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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