Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(config/webui): align multi-column config toggles inline with inputs

Browse Source 
In the config grid (e.g. Backups > Configuration > Engine) toggle pills sat
~6px below and 2px taller than the text/select controls beside them, so they
read as misaligned. Two causes, both scoped to .config-fields:

- .field-group carried a vestigial margin-bottom:6px (the grid's own 16px gap
  already spaces rows). It inflated the grid track, so the align-self:end
  toggle landed 6px below the input controls. Zeroed inside the grid.
- The .checkbox-label pill's 24px switch + 10px vertical padding rendered 46px
  vs the inputs' 44px. Trimmed to 9px padding so the pill is 44px.

Toggles now share the exact vertical band (top + height) as the inputs in
their row. Applies to every config-grid toggle, not just the backup engine.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
librelad 2026-07-07 21:55:12 +01:00
parent 01e8743a8e
commit 143c1ca23d
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
containers/libreportal/frontend/core/forms/css/forms.css
View File

@ -368,15 +368,27 @@ select.form-control:focus {
border: 1px solid rgba(var(--text-rgb), 0.20); border: 1px solid rgba(var(--text-rgb), 0.20);
} }
/* In a multi-column config row the toggle cell only contains the /* In a multi-column config row the toggle cell only holds the toggle pill (no
toggle (no label/help text above it like the input cells do), so label/help text stacked above it like the input cells do), so align-self: end
it sits at the top of the row while the inputs underneath their drops it to the bottom of the row to line up with the inputs' controls rather
labels run lower. align-self: end drops the toggle to the bottom than their labels. Two further adjustments make that line-up exact:
of the grid row so its row aligns with the inputs' row, not the - Zero the inputs' vestigial margin-bottom INSIDE the grid (the grid's own
inputs' labels. */ 16px gap already spaces rows). That margin was inflating the grid track, so
align-self: end landed the toggle ~6px below the input controls.
- Trim the pill to the inputs' 44px height: its 24px switch + the default 10px
vertical padding rendered 46px, leaving the toggle 2px taller than the
inputs it sits beside. */
.config-fields > .checkbox-field { .config-fields > .checkbox-field {
align-self: end; align-self: end;
} }
.config-fields > .field-group {
margin-bottom: 0;
}
.config-fields > .checkbox-field .checkbox-label {
min-height: 44px;
padding-top: 9px;
padding-bottom: 9px;
}
.checkbox-label:hover { .checkbox-label:hover {
background: rgba(var(--text-rgb), 0.07); background: rgba(var(--text-rgb), 0.07);