Skip to content

fix(ui): correct stack-form field-hint and checkbox layout on settings pages #636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CybotTM merged 1 commit into from
Jul 15, 2026
Merged

fix(ui): correct stack-form field-hint and checkbox layout on settings pages #636

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions frontend/src/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -869,8 +869,10 @@ main:has(.tracking) {
grid-column: 2;
}

/* A field's hint sits under its control (column 2), not full-width under the
label — so a date field's "YYYY-MM-DD" hint lines up beneath the input. */
.stack-form .field > .field-hint {
grid-column: 1 / -1;
grid-column: 2;
margin: 0.15em 0 0;
}

Expand All @@ -889,16 +891,18 @@ main:has(.tracking) {
grid-column: auto;
}

/* Right-align labels in the beside layout so the label's edge sits at the
control's left edge (tight label↔field coupling) — except the full-width
exceptions above, whose label sits on top and stays left-aligned. */
.stack-form .field > span {
/* Right-align only the LABEL (the first span) in the beside layout, so its edge
sits at the control's left edge (tight label↔field coupling). Scoped to
:first-child so it never catches a field's other spans — e.g. the DateField's
.date-field-wrap or its .field-hint, which must not be pushed to the right. */
.stack-form .field > span:first-child {
text-align: right;
}

.stack-form .field.multiselect > span,
.stack-form .field:has(textarea) > span,
.stack-form .field-row .field > span {
/* The full-width exceptions keep their label on top, left-aligned. */
.stack-form .field.multiselect > span:first-child,
.stack-form .field:has(textarea) > span:first-child,
.stack-form .field-row .field > span:first-child {
text-align: left;
}

Expand All @@ -913,16 +917,30 @@ main:has(.tracking) {
grid-template-columns: 18em minmax(0, 22em);
}

.stack-form .field-check > span {
/* Pin the rows explicitly: label + box share row 1, an optional hint sits under
the box on row 2. Without pinned rows, sparse auto-placement (the box has an
explicit col 2 and comes first in the DOM) pushes the label onto row 2, leaving
the box stranded above it — visible only once a label wraps or a hint is present. */
.stack-form .field-check > span:not(.field-hint) {
grid-column: 1;
grid-row: 1;
text-align: right;
}

.stack-form .field-check > input {
grid-column: 2;
grid-row: 1;
justify-self: start;
}

/* A checkbox's own hint (e.g. Personio's "available once configured" note) sits
under the box in column 2. */
.stack-form .field-check > .field-hint {
grid-column: 2;
grid-row: 2;
margin: 0.15em 0 0;
}

/* Help-icon rows keep the compact inline pattern (checkbox + its ⓘ side by side),
so they opt out of the two-column grid. */
.stack-form .field-check-row .field-check {
Expand Down
Loading