Mobile checkout viewport optimized; no horizontal scroll

Checkout forms with fixed pixel widths — a table at width: 600px, an input at width: 400px — cause horizontal scrolling at 375px viewport width, the baseline mobile target. WCAG 2.2 SC 1.4.10 (Reflow) requires content to reflow at 320px without horizontal scroll; SC 2.5.5 (Target Size) sets 44x44px as the minimum touch target. A payment button shorter than 44px on a touch screen has a measurably higher mis-tap rate, which causes failed submissions and abandonment at the highest-value step of the funnel. Mobile accounts for a majority of e-commerce sessions in most markets, making a broken mobile checkout a revenue-critical defect.

Verify <meta name="viewport" content="width=device-width, initial-scale=1"> is present in src/app/layout.tsx, then replace fixed-width checkout containers with fluid equivalents:

// src/app/checkout/page.tsx
<div className="w-full max-w-full px-4 box-border md:max-w-[600px] md:mx-auto">
  {/* checkout content */}
</div>

Enforce 44px touch targets in src/app/globals.css:

/* src/app/globals.css */
.checkout-container button,
.checkout-container input,
.checkout-container select {
  min-height: 44px;
  min-width: 44px;
}

Audit for any hardcoded pixel widths in checkout component files and replace with w-full or max-w-* Tailwind utilities. Validate at 375px in browser devtools before shipping.

• ID: ecommerce-cart-ux.order-confirmation.mobile-viewport

• Severity: medium

• What to look for: Check for <meta name="viewport" content="width=device-width, initial-scale=1"> in the root layout (e.g., src/app/layout.tsx). Count all checkout page components and check each for: (a) fixed-width elements exceeding 375px, (b) horizontal overflow (overflow-x: auto/scroll), (c) buttons/inputs with less than 44px height/width. Enumerate checkout components that use max-width or width: 100% patterns. Quote any hardcoded pixel widths found in checkout CSS/styles.

• Pass criteria: Viewport meta tag is present. No more than 0 checkout elements have hardcoded widths exceeding 375px. All interactive elements (buttons, inputs) have minimum 44px touch target size. No horizontal scrolling occurs at 375px viewport width. Report: "Viewport meta present. X checkout components checked, Y use responsive patterns, Z have fixed widths."

• Fail criteria: Viewport meta tag is missing, or checkout elements have fixed widths causing horizontal scroll at 375px, or buttons/inputs are smaller than 44px touch target.

• Skip (N/A) when: The project is explicitly desktop-only (no mobile viewport support intended, stated in project docs).

• Detail on fail: Example: "Viewport meta tag present but checkout form at src/app/checkout/page.tsx has a table with width: 600px. 1 of 4 checkout components causes horizontal scroll at 375px. Payment button is 32px tall, below 44px touch target."

• Cross-reference: For mobile accessibility requirements, the Accessibility Fundamentals audit covers touch targets and zoom behavior. For CSS framework responsive utilities, the Performance & Load audit covers asset optimization.

• Remediation: Fix responsive layout in your checkout styles at src/app/checkout/page.tsx:

  // src/app/checkout/page.tsx
  'use client'
  
  export default function Checkout() {
    return (
      <div className="w-full max-w-full px-4 box-border md:max-w-[600px] md:mx-auto">
        {/* Mobile-first responsive design */}
      </div>
    )
  }
  

  Ensure touch-friendly button sizes in your global styles:

  /* src/app/globals.css */
  .checkout-container button,
  .checkout-container input {
    min-height: 44px; /* Touch-friendly target */
  }