From b863e2cc3db75a205907414df53938c92bcb176f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 00:29:39 +0200
Subject: [PATCH] fix(ui): tap-targets reach 44px on tour, notification,
 backups buttons (v1.4.15 H4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WCAG 2.5.5 Level AAA target-size floor for non-essential controls is
24×24 px and Level AA pointer-target is 24×24 with 24 px gap, but the
mobile-app convention everyone follows is the 44×44 hit-area Apple
HIG / Material recommend. The default `<Button size="sm">` in the
shadcn-base lands at `h-8` (32 px) — readable on desktop, tight on
phones, especially in the most-touched admin/settings/onboarding
surfaces called out in the v1.4.15 design review.

Cross-cutting `button.tsx` `h-9 → h-11` was rejected as too risky
mid-marathon (every UI affected, dozens of layout assumptions). The
targeted alternative bumps the listed call-sites with `min-h-11`
overrides: tour Skip / Back / Next, notification re-enable + send-
test, backups Restore / Download / Run-now / Upload. Admin-only
recent-audit-preview is a `<Link>` not a `<Button>` and is left
alone.

The shadcn `min-h-` Tailwind utility wins over the variant `h-`
because both apply but `min-h-` only floors. So desktop visuals stay
within ~4 px of the previous render while mobile reaches the 44 px
floor.
---
 src/components/admin/backups-section.tsx             |  5 +++++
 src/components/onboarding/tour.tsx                   | 10 +++++++++-
 src/components/settings/notification-status-card.tsx |  6 ++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/admin/backups-section.tsx b/src/components/admin/backups-section.tsx
index 21ef61c6e..6ecd99694 100644
--- a/src/components/admin/backups-section.tsx
+++ b/src/components/admin/backups-section.tsx
@@ -87,6 +87,7 @@ function RestoreRowDialog({
           aria-label={t("admin.section.backups.restoreAria", {
             username: row.username,
           })}
+          className="min-h-11"
         >
           {pending ? (
             <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -343,6 +344,7 @@ export function BackupsSection() {
           size="sm"
           disabled={runBackup.isPending}
           onClick={() => runBackup.mutate()}
+          className="min-h-11"
         >
           {runBackup.isPending ? (
             <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -398,6 +400,7 @@ export function BackupsSection() {
             variant="outline"
             disabled={upload.isPending}
             onClick={() => fileInputRef.current?.click()}
+            className="min-h-11"
           >
             {upload.isPending ? (
               <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -438,6 +441,7 @@ export function BackupsSection() {
                 size="sm"
                 disabled={runBackup.isPending}
                 onClick={() => runBackup.mutate()}
+                className="min-h-11"
               >
                 {runBackup.isPending ? (
                   <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -496,6 +500,7 @@ export function BackupsSection() {
                         aria-label={t("admin.section.backups.downloadAria", {
                           username: row.username,
                         })}
+                        className="min-h-11"
                       >
                         {downloadingId === row.id ? (
                           <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
diff --git a/src/components/onboarding/tour.tsx b/src/components/onboarding/tour.tsx
index dbe7f6db7..a6459f14a 100644
--- a/src/components/onboarding/tour.tsx
+++ b/src/components/onboarding/tour.tsx
@@ -417,13 +417,19 @@ export function OnboardingTour({
           {t(stop.bodyKey)}
         </p>
 
+        {/* v1.4.15 H4 design: tour footer buttons reach the WCAG 2.5.5
+            44 px tap-target floor on mobile. The `size="sm"` default
+            of `h-8` clipped to ~32 px which Marc reported as too small
+            on the iPad / iPhone PWA shell. Bumping to `min-h-11` (44 px)
+            keeps the desktop visual close enough — the buttons grow
+            ~4 px taller — while making mobile usable. */}
         <footer className="mt-5 flex items-center justify-between gap-2">
           <Button
             type="button"
             variant="ghost"
             size="sm"
             onClick={handleSkip}
-            className="text-muted-foreground hover:text-foreground"
+            className="text-muted-foreground hover:text-foreground min-h-11"
           >
             {t("onboarding.tour.skip")}
           </Button>
@@ -434,6 +440,7 @@ export function OnboardingTour({
                 variant="outline"
                 size="sm"
                 onClick={handlePrev}
+                className="min-h-11"
               >
                 {t("onboarding.tour.back")}
               </Button>
@@ -444,6 +451,7 @@ export function OnboardingTour({
               size="sm"
               onClick={handleNext}
               data-testid="onboarding-tour-primary"
+              className="min-h-11"
             >
               {isLast ? t("onboarding.tour.done") : t("onboarding.tour.next")}
             </Button>
diff --git a/src/components/settings/notification-status-card.tsx b/src/components/settings/notification-status-card.tsx
index e1f0d6314..4e567ee31 100644
--- a/src/components/settings/notification-status-card.tsx
+++ b/src/components/settings/notification-status-card.tsx
@@ -256,6 +256,10 @@ function ChannelRow({
         </dl>
       </div>
 
+      {/* v1.4.15 H4 design: action buttons hit the WCAG 2.5.5 44 px
+          floor on mobile via `min-h-11`. Settings is the most-touched
+          mobile surface; `size="sm"` here clips to ~32 px which Marc
+          flagged as too small on the iPad/iPhone PWA shell. */}
       <div className="flex flex-wrap gap-2">
         {channel.state === "auto_disabled" && (
           <Button
@@ -265,6 +269,7 @@ function ChannelRow({
             onClick={onReEnable}
             disabled={reEnablePending}
             data-testid={`re-enable-${channel.type}`}
+            className="min-h-11"
           >
             {reEnablePending ? (
               <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -281,6 +286,7 @@ function ChannelRow({
           onClick={onTest}
           disabled={testPending || channel.state === "auto_disabled"}
           data-testid={`send-test-${channel.type}`}
+          className="min-h-11"
         >
           {testPending ? (
             <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />