fix(auth): bump login buttons to 44px tap-target on mobile

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>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-09 20:53:21 +02:00
1 parent 00f8cd556d
commit c0b14f427c
1 file changed
+14 -3
+14 -3
View File
@@ -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" />
) : (