Responsive tests

Responsive QC verifies that every surface composes correctly across the platform’s three breakpoints — mobile (≤640px), tablet (641-1024px), desktop (≥1025px). Two extra widths get checked in regression: 320px (smallest supported) and 1920px (largest common). The contract: no horizontal scroll, no clipped content, no broken touch targets at any width in the supported range.

Per-breakpoint checklist

• Mobile (320px + 375px + 640px): single-column grids, touch targets ≥44px, sticky headers don’t overlap CTAs, drawer/modal triggers reachable with thumb.
• Tablet (768px + 1024px): 2-column grids, filter rails visible but compressed, sidebar sticky on long-form content.
• Desktop (1280px + 1440px + 1920px): 3-4 column grids, full filter panel, sidebar full-width, no max-width clipping on the body main column.
• No content clipping at any width — the smallest supported viewport (320px) must show every CTA, every form field, every primary navigation entry without horizontal scroll.
• Skeleton loaders render at every breakpoint, not just desktop.
• Image aspect ratios shift at breakpoint boundaries as documented (e.g. cover image 16:9 desktop → 4:3 mobile for coverage articles).