From a18e96eec9a81fd1983f51d456ad9423537034b8 Mon Sep 17 00:00:00 2001 From: mwiegand Date: Tue, 19 May 2026 00:40:39 +0200 Subject: [PATCH] fix(css): zero padding on custom radio + switch inputs The global input rule (components.css:53-61) applies padding to ALL inputs, including type=radio and type=checkbox. That inflated the new .radio-row and .switch-row controls from 16x16px boxes into 40x32px rectangles, which border-radius then rendered as ovals. Adds padding: 0 + box-sizing: border-box to both control rules, and border: 0 to the switch (the global border rule was squaring off its pill shape). Caught in browser smoke after fa394c1. Co-Authored-By: Claude Opus 4.7 (1M context) --- l4d2web/l4d2web/static/css/components.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/l4d2web/l4d2web/static/css/components.css b/l4d2web/l4d2web/static/css/components.css index 16861c6..a5a1972 100644 --- a/l4d2web/l4d2web/static/css/components.css +++ b/l4d2web/l4d2web/static/css/components.css @@ -1220,8 +1220,10 @@ div.modal.modal-wide { .radio-row > input[type="radio"] { appearance: none; + box-sizing: border-box; width: 1rem; height: 1rem; + padding: 0; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-bg); @@ -1275,9 +1277,12 @@ div.modal.modal-wide { .switch-row > input[type="checkbox"] { appearance: none; + box-sizing: border-box; position: relative; width: 1.875rem; height: 1rem; + padding: 0; + border: 0; background: var(--color-border); border-radius: 999px; flex: 0 0 auto;