Onboarding flow is functional on mobile devices
Why it matters
More than half of web traffic is mobile. A signup or onboarding flow that overflows on a 375px screen doesn't just frustrate users — it locks out a majority of potential customers before they ever see the product. WCAG 2.2 SC 2.5.5 sets a 44px minimum touch target to prevent mis-taps; Section 508 §502.3.3 requires platform accessibility. A fixed-width onboarding form isn't a cosmetic issue: it's a conversion failure that compounds every day it ships.
Severity rationale
Medium because broken mobile onboarding blocks a significant portion of users from completing signup, directly cutting conversion without creating a security exposure.
Remediation
In src/app/(auth)/layout.tsx, replace fixed-width containers with responsive fluid layouts:
<div className="flex min-h-screen items-center justify-center p-4">
<Card className="w-full max-w-md">
{children}
</Card>
</div>
All buttons must use h-11 (44px) or taller. Audit every form input with className containing a fixed w-[N]px value and replace with w-full. Test at 375px viewport width — if anything scrolls horizontally, it fails.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Onboarding UX Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- wcag:2.2 · 2.5.5 — Target Size (Minimum)
- wcag:2.2 · 1.3.4 — Orientation
- section-508:2018-refresh · 502.3.3 — Focus
Taxons
History
- 2026-04-18·v1.0.0·Initial import from saas-onboarding·automated