fix(ui): correct stack-form field-hint and checkbox layout on settings pages#636
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refines the grid layout for form fields in frontend/src/styles/app.css by aligning field hints under their controls, scoping label alignments to the first child span, and explicitly pinning rows for checkbox fields. The feedback points out that the .stack-form .field-check > span selector is too broad and could accidentally match a .field-hint if it is implemented as a span, suggesting to scope it using :not(.field-hint) to prevent layout issues.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
…s pages The #635 stack-form rules were verified against Billing/Auswertung but not the settings pages, where two layouts broke: - A DateField's "YYYY-MM-DD" hint floated to the far right: the label right-align (`.field > span`) also caught the hint span, which spans the full width. Scope the right-align to the label (`:first-child`) and place a field's hint under its control (column 2). - A checkbox with its own hint (Personio) stranded the box above its label: sparse grid auto-placement — the box has an explicit column and precedes the label in the DOM — can't put the later label back on row 1. Pin the rows: label + box on row 1, hint under the box on row 2. Verified at 1440px on the sync and account settings pages. Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
de14476 to
6a3cd07
Compare
|
Summary
Fixes two form-layout regressions from #635 (shipped in v6.3.1) that landed on the settings pages. #635's
.stack-formrules were verified against Billing/Auswertung but not the settings, where the field and checkbox structures differ (a.fieldcan hold a.field-hint; a.field-checkcan hold three children).Fixes
/ui/settings/sync): the label right-align (.stack-form .field > span) also caught the DateField's.field-hintspan, which spans the full width — pushing "YYYY-MM-DD" to the right edge. Scoped the right-align to the label (:first-child); a field's hint now sits under its control (column 2).Verification
Visual check at 1440px on
/ui/settings/syncand/ui/settings/account: date hints sit under the date fields, checkboxes align with their labels on one row, and a per-checkbox hint sits below the box. CSS-only — CI re-verifies tests/typecheck/lint.