From 143c1ca23db30b635c0930d067bbff024b0c0909 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Tue, 7 Jul 2026 21:55:12 +0100
Subject: [PATCH] fix(config/webui): align multi-column config toggles inline
 with inputs

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>
---
 .../frontend/core/forms/css/forms.css         | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

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);