From 6c7fcaf90ac92794bb4e7be1717c652e879adc1b Mon Sep 17 00:00:00 2001 From: Oleh Veheria Date: Sat, 22 Aug 2026 02:57:54 +0200 Subject: [PATCH] fix(a11y): scenario-picker tabs + plain-language checkbox under 44px on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Continuing the touch-target sweep from the previous commit: a real 390px-viewport check (qa-preview.html against the live site — a resized window doesn't fire mobile media queries in this browser tool) found the 7 scenario tabs (.seg b, wraps to 3 rows at this width) at 34px and the "plain language" checkbox label at ~20px, both under the 44x44 minimum. Bumped .seg b's vertical padding and gave .plainck a negative-margin padding expansion (same technique already used on Header.astro's logo) so the hit area grows without shifting layout. Both now measure 44px. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_016hYVVizgvJ4wZBug9XTjVG (cherry picked from commit ddf7c05600f4714b09f0d72fbb771029d9e998a4) --- examples/demo/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/demo/index.html b/examples/demo/index.html index 43bb991..ec7d818 100644 --- a/examples/demo/index.html +++ b/examples/demo/index.html @@ -80,10 +80,10 @@ /* controls */ .controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:20px} .seg{display:flex;flex-wrap:wrap;gap:6px;background:var(--sunken);border:1px solid var(--hair);border-radius:var(--r-lg);padding:4px} -.seg b{font-weight:540;font-size:13px;color:var(--muted);padding:7px 14px;border-radius:var(--r-full);cursor:pointer;transition:.2s var(--ease)} +.seg b{font-weight:540;font-size:13px;color:var(--muted);padding:12px 14px;border-radius:var(--r-full);cursor:pointer;transition:.2s var(--ease)} .seg b:hover{color:var(--ink)} .seg b.on{background:var(--indigo);color:#fff} -.plainck{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none} +.plainck{display:inline-flex;align-items:center;gap:8px;padding:12px 4px;margin:-12px -4px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none} .plainck input{accent-color:var(--indigo);width:16px;height:16px} .plainck.act{color:var(--ink)} .situation{font-size:17px;color:var(--ink);font-weight:500;max-width:66ch;line-height:1.5;margin-bottom:4px}