From 68ca4e0456a65a1932f2e45b23d060aa11db2add Mon Sep 17 00:00:00 2001
From: Niels Mokkenstorm <niels@mokkenstorm.dev>
Date: Mon, 10 Aug 2026 12:27:01 +0200
Subject: [PATCH] fix: raise every tap target and input to the 44px/16px floor

---
 web/css/04-controls.css      | 13 +++++++---
 web/css/07-browse.css        | 10 +++++---
 web/css/08-nav-bar.css       |  5 +++-
 web/css/10-edit-inbox.css    |  7 +++++-
 web/css/13-scan.css          |  4 ++-
 web/css/15-misc.css          |  4 ++-
 web/css/16-login.css         |  4 +++
 web/css/19-edit-proposal.css |  6 ++++-
 web/css/90-interaction.css   | 48 +++++++++++++++++++++++++++---------
 9 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/web/css/04-controls.css b/web/css/04-controls.css
index b87fbd2..bc41c58 100644
--- a/web/css/04-controls.css
+++ b/web/css/04-controls.css
@@ -77,7 +77,9 @@
   gap: 6px;
   border: 2px solid var(--ink);
   box-shadow: var(--shadow-sm);
-  padding: 13px 16px;
+  /* 13px font + 15px×2 padding + 2px×2 border = 47px, the Figma spec's tap
+     target, not just the 44px floor. */
+  padding: 15px 16px;
   font: 700 13px/1 var(--mono);
   letter-spacing: 0.5px;
   text-transform: uppercase;
@@ -117,9 +119,12 @@
   width: 100%;
 }
 /* A smaller footprint for buttons sitting inline in chrome rows (e.g. the
-   public-crate hero bar) rather than a form/card's own action row. */
+   public-crate hero bar) rather than a form/card's own action row. Still a
+   real 44px box, not a halo: `.btn` shows up in rows an author can pack
+   tightly, so its tap target is never allowed to depend on empty neighbour
+   space. 12px font + 14px×2 padding + 2px×2 border = 44px. */
 .btn--compact {
-  padding: 6px 12px;
-  font-size: 11px;
+  padding: 14px 14px;
+  font-size: 12px;
 }
 
diff --git a/web/css/07-browse.css b/web/css/07-browse.css
index ea8460e..bbfad30 100644
--- a/web/css/07-browse.css
+++ b/web/css/07-browse.css
@@ -17,9 +17,7 @@
 .browse-search__input input {
   width: 100%;
   padding-left: 34px;
-  /* Compact toolbar chrome, not a form field - deliberately under the
-     16px floor the rest of the form inputs keep to dodge iOS zoom-on-focus. */
-  font: 400 13px/1.3 var(--mono);
+  font: 400 16px/1.3 var(--mono);
 }
 .browse-search__input input::placeholder {
   color: var(--ink-muted);
@@ -90,9 +88,13 @@
   display: flex;
   gap: 6px;
 }
+/* Carries `.btn`, so it opts out of the shared halo (90-interaction.css);
+   the two actions sit only 6px apart, too tight to trust a halo not to
+   bleed onto the neighbour. 11px font + 15px×2 padding + 2px×2 border =
+   45px, earned for real. */
 .browse-card__actions .btn {
   flex: 1;
-  padding: 9px 8px;
+  padding: 15px 8px;
   font-size: 11px;
 }
 
diff --git a/web/css/08-nav-bar.css b/web/css/08-nav-bar.css
index 288ae12..f856538 100644
--- a/web/css/08-nav-bar.css
+++ b/web/css/08-nav-bar.css
@@ -21,7 +21,9 @@
 
 /* Padding (not a bigger font) grows the tap target to the 44px floor; the
    bar itself stays a fixed 56px so this just eats into the flex-centered
-   whitespace that already surrounded the tab's visible content. */
+   whitespace that already surrounded the tab's visible content. min-height
+   covered the vertical axis; min-width does the same for narrow labels
+   like "YOU" that padding alone left under 44px wide. */
 .tab {
   display: flex;
   flex-direction: column;
@@ -30,6 +32,7 @@
   gap: 4px;
   padding: 14px 6px;
   min-height: 44px;
+  min-width: 44px;
   box-sizing: border-box;
   color: var(--ink-muted);
   text-decoration: none;
diff --git a/web/css/10-edit-inbox.css b/web/css/10-edit-inbox.css
index 39ea99f..225101f 100644
--- a/web/css/10-edit-inbox.css
+++ b/web/css/10-edit-inbox.css
@@ -77,10 +77,15 @@
   display: flex;
   gap: 12px;
 }
+/* Vertical padding is redundant now that the `.btn` base already reaches
+   47px on its own; only the extra horizontal room and the heavier
+   border/shadow (approve/reject deserve more visual weight) are this
+   row's own. */
 .actions .btn {
   border-width: 2.5px;
   box-shadow: var(--shadow-md);
-  padding: 15px 18px;
+  padding-left: 18px;
+  padding-right: 18px;
 }
 .actions .btn--primary {
   flex: 1;
diff --git a/web/css/13-scan.css b/web/css/13-scan.css
index 66a867d..a63b82f 100644
--- a/web/css/13-scan.css
+++ b/web/css/13-scan.css
@@ -56,8 +56,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Carries `.btn`, so it opts out of the shared halo (90-interaction.css)
+   and earns 44px for real: 13px font + 14px×2 padding + 2px×2 border. */
 .scan-row__dismiss {
-  padding: 6px 10px;
+  padding: 14px 12px;
 }
 .results-scroll {
   margin-top: 12px;
diff --git a/web/css/15-misc.css b/web/css/15-misc.css
index fc8d86c..6824773 100644
--- a/web/css/15-misc.css
+++ b/web/css/15-misc.css
@@ -49,6 +49,8 @@
   flex: 1;
   min-width: 0;
 }
+/* 34px visual (14px font + 10px×2 padding) clears the shared halo's +5px
+   sides (90-interaction.css) up to the 44px floor. */
 .notice__dismiss {
   flex-shrink: 0;
   width: auto;
@@ -57,7 +59,7 @@
   color: inherit;
   cursor: pointer;
   font: 700 14px/1 var(--mono);
-  padding: 2px 4px;
+  padding: 10px 12px;
 }
 .notice--success {
   background: var(--owned);
diff --git a/web/css/16-login.css b/web/css/16-login.css
index f9f28e8..da52e6d 100644
--- a/web/css/16-login.css
+++ b/web/css/16-login.css
@@ -76,9 +76,13 @@
   display: flex;
   flex-direction: column;
 }
+/* Rows stack edge-to-edge (only a 1px divider between them), so a halo
+   would reach into the next provider's row; min-height is a real 44px
+   instead. */
 .provider {
   display: flex;
   align-items: baseline;
+  min-height: 44px;
   gap: 8px;
   padding: 10px 0;
   text-decoration: none;
diff --git a/web/css/19-edit-proposal.css b/web/css/19-edit-proposal.css
index a1113c6..33b593c 100644
--- a/web/css/19-edit-proposal.css
+++ b/web/css/19-edit-proposal.css
@@ -67,10 +67,14 @@
   gap: 12px;
   margin-bottom: 8px;
 }
+/* Vertical padding is redundant now that the `.btn` base already reaches
+   47px on its own; only the extra horizontal room and the heavier
+   border/shadow are this row's own. */
 .proposal-detail-actions .btn--primary {
   border-width: 2.5px;
   box-shadow: var(--shadow-md);
-  padding: 15px 18px;
+  padding-left: 18px;
+  padding-right: 18px;
 }
 .proposal-detail-footnote {
   margin: 0;
diff --git a/web/css/90-interaction.css b/web/css/90-interaction.css
index d683fb1..70bb283 100644
--- a/web/css/90-interaction.css
+++ b/web/css/90-interaction.css
@@ -24,26 +24,50 @@ textarea:focus-visible {
   outline-offset: 2px;
 }
 
-/* 34px visuals keep their size; an invisible halo grows the touch target
-   to ~44px. Interactive elements only: a halo on plain .chip spans would
-   swallow taps meant for their neighbours. */
-.icon-btn,
-button.chip,
-.display-toggle__btn,
-.scan-row__dismiss {
+/* Tap-target floor (44px), structural rather than a maintained list: a
+   plain `<button>` or `[role="button"]` is, in this codebase, always a
+   small icon/dismiss/filter-style control sized to its content well under
+   the floor, so it defaults to an invisible halo that grows the hit area
+   without growing the visual. A new one is covered without anyone
+   remembering to add it here.
+   `.btn`-family controls (button or anchor) opt out on purpose: they turn
+   up in rows with author-controlled gaps (6-12px in this codebase) too
+   tight to trust a shared halo not to bleed onto a neighbour, so they earn
+   their 44px+ the honest way, in their own padding (see 04-controls.css
+   and its per-case overrides).
+   `.icon-btn` opts back in explicitly because it's also rendered as an
+   `<a>` (the back button), which `button:not(.btn)` can't reach. */
+button:not(.btn),
+[role="button"]:not(.btn),
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+.icon-btn {
   position: relative;
 }
-.icon-btn::before,
-button.chip::before,
-.display-toggle__btn::before,
-.scan-row__dismiss::before {
+button:not(.btn)::before,
+[role="button"]:not(.btn)::before,
+input[type="submit"]::before,
+input[type="button"]::before,
+input[type="reset"]::before,
+.icon-btn::before {
   content: "";
   position: absolute;
   inset: -5px;
 }
+/* Already >=44px on its own box (.segment button's min-height) and packed
+   edge-to-edge with a sibling behind a 2px divider: a halo here would
+   steal taps across that divider instead of growing into empty space. */
+.segment button::before {
+  content: none;
+}
 
+/* 34px visual (11px font + 9.5px×2 padding + 2px×2 border), +5px halo on
+   all sides on the interactive `button.chip` variant = the spec's 44px hit
+   area. Applies to `.chip` broadly (not just `button.chip`) so a static
+   badge chip matches the visual size of a clickable one. */
 .chip {
-  padding: 9px 11px;
+  padding: 9.5px 11px;
 }
 
 /* Press feedback for the button-like controls .btn doesn't already cover
-- 
2.51.2