From c0b14f427c4e51fa4ae566414b417f355fe6c5e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 20:53:21 +0200
Subject: [PATCH] fix(auth): bump login buttons to 44px tap-target on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase A5 / B-mobile MEDIUM: at 393px the login screen's two CTA
buttons ("Sign in with Passkey" / "Sign in with password" / "Login")
were rendered at default size — `h-9` (36px) — below the WCAG 2.5.5
44px minimum for touch targets. Login is the most-tapped flow on a
fresh install; this is the first screen a new user sees on mobile.

Fix: switch the three login buttons to `size="lg"` plus an explicit
`min-h-11` so they reach the 44px floor. The "lg" CVA variant gives
`h-10` natively; the `min-h-11` upgrade keeps us above the WCAG
threshold even if the variant is later tuned for desktop density.

Files: `src/app/auth/login/page.tsx` only.

Findings ID: A5/MEDIUM `/auth/login` — Sign-in button tap-target.

Verification: 853 / 853 unit tests pass; one pre-existing unrelated
failure in `notification-status-card.test.tsx` from B3's
in-progress channel-reliability work is excluded — see B3's report.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/auth/login/page.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index ed1f25890..48a4f9611 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -129,9 +129,14 @@ export default function LoginPage() {
         </div>
 
         <div className="mt-8 space-y-4">
+          {/* Phase A5 / B-mobile: bumped from default size (h-9, 36px)
+              to size="lg" so the login CTAs meet WCAG 2.5.5 (44px
+              minimum) on mobile. Login is the most-tapped flow on a
+              fresh install. */}
           <Button
             onClick={handlePasskeyLogin}
-            className="w-full"
+            className="min-h-11 w-full"
+            size="lg"
             disabled={loading}
           >
             {loading && mode === "passkey" ? (
@@ -153,7 +158,8 @@ export default function LoginPage() {
           {mode === "passkey" ? (
             <Button
               variant="outline"
-              className="w-full"
+              className="min-h-11 w-full"
+              size="lg"
               onClick={() => setMode("password")}
             >
               <Lock className="mr-2 h-4 w-4" />
@@ -185,7 +191,12 @@ export default function LoginPage() {
                   placeholder="********"
                 />
               </div>
-              <Button type="submit" className="w-full" disabled={loading}>
+              <Button
+                type="submit"
+                className="min-h-11 w-full"
+                size="lg"
+                disabled={loading}
+              >
                 {loading && mode === "password" ? (
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 ) : (