diff --git a/containers/libreportal/frontend/core/forms/css/forms.css b/containers/libreportal/frontend/core/forms/css/forms.css index 83abc7f..9e10f6a 100644 --- a/containers/libreportal/frontend/core/forms/css/forms.css +++ b/containers/libreportal/frontend/core/forms/css/forms.css @@ -368,15 +368,27 @@ select.form-control:focus { border: 1px solid rgba(var(--text-rgb), 0.20); } -/* In a multi-column config row the toggle cell only contains the - toggle (no label/help text above it like the input cells do), so - it sits at the top of the row while the inputs underneath their - labels run lower. align-self: end drops the toggle to the bottom - of the grid row so its row aligns with the inputs' row, not the - inputs' labels. */ +/* In a multi-column config row the toggle cell only holds the toggle pill (no + label/help text stacked above it like the input cells do), so align-self: end + drops it to the bottom of the row to line up with the inputs' controls rather + than their labels. Two further adjustments make that line-up exact: + - Zero the inputs' vestigial margin-bottom INSIDE the grid (the grid's own + 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 { 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 { background: rgba(var(--text-rgb), 0.07);