Audit a page across breakpoints

Audit this page across screen sizes and fix what is broken: **[page name and URL]**

Look at it rendered. Reading the CSS and reasoning about what it probably does is how responsive bugs survive.

## Widths to check

320, 375, 414, 768, 1024, 1280, 1440, 1920. Also check 375px with the text size at 200%, because that is a real setting people use and it breaks more layouts than any narrow viewport.

## What counts as a problem

- **Horizontal overflow of the page.** Find the element that is too wide rather than putting `overflow-x: hidden` on an ancestor, which hides the symptom and keeps the bug. A code block, a wide table or a deliberate carousel scrolling inside its own box is fine — that is a scroll container, not overflow.
- **Touch targets under 44px** on the widths a phone uses, or targets close enough together to be a coin toss. 44px is the target I want; WCAG 2.2 AA only requires 24×24 with exceptions, so treat anything between the two as worth raising but not a conformance failure.
- **Body copy wider than about 85 characters** at desktop widths — aim for 45–75. Do not enforce the lower bound at 320px or with the text size doubled: lines are naturally short there, and chasing a minimum measure at those sizes means shrinking the text, which is worse.
- **Hierarchy that collapses.** A heading and its content drifting apart until they read as unrelated blocks, usually because a single gap value is doing two different jobs at two different widths.
- **Orphaned or stranded elements** — a heading alone at the bottom of a viewport, a two-item row wrapping to leave one item on its own line.
- **Things that vanish.** If a breakpoint hides content, say what and why. Often that is a decision nobody made.
- **Images without intrinsic dimensions**, and the layout shift they cause.

## How to fix it

Prefer a layout that does not need the breakpoint: `clamp()` for type and spacing, `minmax()` and `auto-fit` in grid, `flex-wrap`, container queries where the component's own width is what matters rather than the viewport's. Adding a fifth media query to a component that already has four is a sign the layout itself is wrong.

Watch for the subgrid trap: a `row-gap` on a subgrid parent that the child rows inherit, giving you spacing you did not ask for and cannot see in the CSS of the thing you are looking at.

## Report

A table: width, what was wrong, what you did. Screenshots at 375 and 1440 before and after. And flag anything you found that is broken beyond this page, because a layout bug in a shared component is never only here.