vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: fill create-agent's empty column with an explanatory panel

Browse source 
mara's follow-up on the field-alignment fix: narrowing the form panel
left a lot of bare space next to it, and asked for something that
fills it while helping a new user understand what the page does.

Adds a second panel beside the form (stacks under it on a narrow
viewport) explaining the job chain '/api/agents' actually queues:
an authelia identity, then a forge config repo — no container exists
yet after this page, and deploying one onto the chosen hive is a
separate step that isn't wired up server-side.
This commit is contained in:
iris 2026-08-19 14:28:38 +02:00 • committed by mara
commit fc65811d9f
2 changed files with 99 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend/packages/swarm-ui/src/pages/CreateAgentPage.css
View file

@ -1,21 +1,42 @@
/* <CreateAgentPage> — the create-agent form. Input/button chrome now
comes from the shared `ui/` form kit (`TextField`/`SelectField`/
`Button`); this file only owns the page's own layout + copy. Column,
not row: with a second field (hive) added, a row layout put fields of
different natural widths on one baseline and looked misaligned —
mara: "make it a col". Reuses the same base16 slots (../theme.css)
every other component draws from.
not row inside the form itself: with a second field (hive) added, a
row layout put fields of different natural widths on one baseline and
looked misaligned — mara: "make it a col". Reuses the same base16
slots (../theme.css) every other component draws from.
`.create-agent-page` caps the panel's own width: `Panel` has no width
opinion of its own, so left unconstrained it 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 alongside the field
misalignment. 24em roughly matches the fields' own 16em cap
(../ui/form-field/FormField.css) plus the panel's 1em body padding on
each side and a little breathing room, so the panel reads as sized to
its content instead of to the page column. */
`.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
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). */
.create-agent-page {
max-width: 24em;
max-width: 44em;
}
.create-agent-layout {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.5em;
}
.create-agent-form-col {
flex: 0 1 24em;
}
.create-agent-info-col {
flex: 1 1 16em;
}
.create-agent-info-glyph {
margin: 0 0 0.5em;
font-size: 2em;
}
.create-agent-intro {
margin: 0 0 1.5em;