Onboarding flow is functional on mobile devices

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.

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: 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.