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: fix create-agent form field alignment and panel width

Browse source 
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.
This commit is contained in:
iris 2026-08-19 14:13:02 +02:00 • committed by mara
commit f14fc154cc
3 changed files with 69 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/packages/swarm-ui/src/ui/form-field/FormField.css
View file

@ -8,11 +8,24 @@
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. */
(../../theme.css), never literal.
The field wrapper repeats `.ui-form-control`'s own `width: 100%;
max-width: 16em` rather than leaving the wrapper unconstrained: inside
a shrink-to-fit flex column (`CreateAgentPage`'s form is one), an
unconstrained wrapper sizes to its own content — and a `width: 100%`
*control* inside an auto-width wrapper resolves against that shrunk
width, not the intended 16em cap, so two fields with differently-long
labels ("agent name" vs "hive") ended up with differently-wide inputs —
the misalignment mara reported on the create-agent page. Matching the
two declarations here means every field's control width is driven by
the same fixed cap 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;