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.
Medium because broken mobile onboarding blocks a significant portion of users from completing signup, directly cutting conversion without creating a security exposure.
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.
ID: saas-onboarding.activation.mobile-onboarding-functional
Severity: medium
What to look for: Count all signup and onboarding screens. For each, check responsive CSS usage: Tailwind responsive prefixes, CSS media queries, fluid layouts. Measure touch target sizes — minimum 44px required. Count any fixed-width containers.
Pass criteria: All signup and onboarding screens use responsive layout patterns. Form inputs, buttons, and interactive elements have touch-target sizes of at least 44 pixels height. No UI element overflows the viewport horizontally at 375px width.
Fail criteria: Signup or onboarding screens use fixed pixel widths that overflow on small screens; form inputs or buttons are too small to tap reliably (under 32px height); modal dialogs overflow the viewport on mobile; horizontal scrolling is required on any onboarding screen.
Skip (N/A) when: The application is explicitly desktop-only (documented in README or marketing copy as requiring a desktop browser, and no mobile-responsive CSS is present anywhere in the project).
Detail on fail: "Signup form uses fixed 600px width container with no responsive breakpoint. Onboarding modal exceeds viewport on screens narrower than 768px. Submit button height is 28px — below touch target minimum."
Remediation: In your auth layout at src/app/(auth)/layout.tsx, use responsive containers:
<div className="flex min-h-screen items-center justify-center p-4">
<Card className="w-full max-w-md">
{children}
</Card>
</div>
Ensure all buttons use h-11 (44px minimum).
Cross-reference: For a deeper review of mobile responsiveness across the full application, the Mobile Responsiveness Audit covers this in detail.