# Mobile checkout viewport optimized; no horizontal scroll

- **Pattern:** `ab-001110` (`ecommerce-cart-ux.order-confirmation.mobile-viewport`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001110
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001110)

## Why it matters

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.

## Severity rationale

Medium because WCAG 2.2 Reflow and Target Size violations at the checkout step produce measurable mobile abandonment and expose the site to accessibility complaints.

## Remediation

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:

```tsx
// 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`:

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

## Detection

- **ID:** `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`:

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

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

## External references

- wcag 1.4.10
- wcag 2.5.5

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-001110