4fd6480c9c
Three doc comments elsewhere in the tree still named the old CreateAgentPage identifier/page framing after the rename in this branch -- TextField.tsx, Panel.tsx, FormField.css (x3). None of these files are touched by the rest of the diff, which is exactly how the staleness happened.
47 lines
2 KiB
CSS
47 lines
2 KiB
CSS
/* <FormField> — label stacked above its control, plus the shared
|
|
`.ui-form-control` chrome every text/select input in the kit draws
|
|
from (one class, so the two never drift). `width: 100%` fills
|
|
whichever container the caller gives it — the kit itself has no
|
|
opinion on a maximum width; a page that wants one narrower than its
|
|
own layout caps it at the layout level (`CreateAgentForm.css`'s
|
|
`.create-agent-form-col` is the existing example), same reasoning
|
|
`Panel` has no width opinion of its own either. `min-height` is a
|
|
touch-target floor (44px at the default 16px root font — WCAG
|
|
2.5.5's minimum), not a visual choice — it's the same on 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.
|
|
|
|
The field wrapper repeats `.ui-form-control`'s own `width: 100%`
|
|
rather than leaving the wrapper unconstrained: inside a shrink-to-fit
|
|
flex column (`CreateAgentForm`'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 container the page actually gave it, 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 form. Matching the two declarations here means every
|
|
field's control width is driven by the same container width
|
|
regardless of its label's length or its siblings'. */
|
|
.ui-form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3em;
|
|
width: 100%;
|
|
}
|
|
.ui-form-field-label {
|
|
font-size: 0.85em;
|
|
color: var(--muted);
|
|
}
|
|
.ui-form-control {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
border: 1px solid var(--purple-dim);
|
|
border-radius: 0.3em;
|
|
padding: 0.4em 0.6em;
|
|
font: inherit;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
min-height: 2.75em;
|
|
}
|