From fd6517d53aeb64b3ee52b6f1d8a8d67d20f934ed Mon Sep 17 00:00:00 2001
From: m <paragraphenreiter@gmail.com>
Date: Thu, 30 Apr 2026 21:45:09 +0200
Subject: [PATCH] fix(t-paliad-096): checkbox row-alignment in form-field
 contexts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`.form-field input` set `width: 100%` and `padding: 0.55rem 0.75rem` on
all inputs — that includes checkboxes and radios. The visual checkbox
visibly stretched to fill the form column on /settings (Benachrichtigungen
tab) and inside the Fristenrechner "Fristen übernehmen" save modal,
pushing the label text out of place.

Add a targeted override that restores natural sizing for type=checkbox
and type=radio inside `.form-field`. Also bump `.caldav-toggle-label`
specificity (selector → `label.caldav-toggle-label`) so its
`inline-flex; align-items: center; gap: 0.5rem` actually wins over the
generic `.form-field label { display: block }` rule — without that the
checkbox + label kiss with no gap.

Surfaces verified via Playwright on paliad.de:
- /settings?tab=benachrichtigungen — Frist-Erinnerungen master + 3 sub-toggles
- /tools/fristenrechner — "Fristen übernehmen" save modal rows
---
 frontend/src/styles/global.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 562810f..f5fedbb 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -2373,6 +2373,15 @@ input[type="range"]::-moz-range-thumb {
     border-color: var(--color-accent);
 }
 
+/* Checkboxes and radios must not inherit the text-input width:100% / padding
+   that the rule above sets — without this, the visual checkbox stretches to
+   fill the form column and the label text wraps below it. */
+.form-field input[type="checkbox"],
+.form-field input[type="radio"] {
+    width: auto;
+    padding: 0;
+}
+
 .form-actions {
     display: flex;
     justify-content: flex-end;
@@ -5970,7 +5979,7 @@ input[type="range"]::-moz-range-thumb {
 .caldav-toggle-field {
     margin-top: 0.5rem;
 }
-.caldav-toggle-label {
+label.caldav-toggle-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;