Responsive audit and fixes

Use the public xzero-ui MCP server at https://mcp.xzero.co.uk/mcp. The complete Free and Pro library is available through this service. No account, sign-in, token, or upstream fallback is required. If the service is unavailable, retry later; do not use upstream services.

Copy this checklist:

Responsive audit:
- [ ] 1. Measured at 320, 390, 768, 1024, 1440
- [ ] 2. Issues table written
- [ ] 3. Fixes applied in priority order
- [ ] 4. Re-measured, all widths pass

1. Measure

Render at 320, 390, 768, 1024, and 1440px. Where you can run the page, check sideways overflow in the console:

[...document.querySelectorAll("*")].filter(el => el.getBoundingClientRect().right > document.documentElement.clientWidth + 1)

For each width record overflow, clipped or overlapping text, cramped controls, targets under 44px, hover-only content, and doubled gutters.

2. Issues table

3. Fix in this order

1. Sideways overflow. Usual causes: fixed pixel widths, 100vw, long unbroken strings, tables, a second container with its own padding. Fix with min-width: 0 on grid and flex children, overflow-wrap: anywhere on user content, width: 100% instead of 100vw, and a scroll wrapper inside the table's card.
2. Container and gutters. One page container with padding-inline: clamp(16px, 4vw, 32px). Remove gutters that blocks or sections add on top.
3. Layout. Collapse grids to one column below about 800px. Settings rows stack below about 560px. Move secondary sidebars below content or into a drawer. Keep the primary action reachable without hunting.
4. Overlays. On phones use bottom-sheet for tasks and long menus; keep popover for small choices. dialog already fits phones.
5. Touch. Controls at least 44px (--control-height-md), 8px between targets. Hover content gets a tap or focus path; gestures get a button path.
6. Type. Headings use clamp() between two scale steps. Body stays at --text-base or --text-sm; nothing below --text-xs.
7. Components. Read each item's "Responsive behavior" section and use its props (stackBelow and stickyTop on comparison-table, height on line-chart and bar-chart) instead of wrapping it in media queries.
8. Media. Explicit aspect-ratio on images and charts so nothing shifts while loading.

Rules: container queries for component-level changes, media queries for page layout. Do not hide content the task needs on phones; reorganize it.

4. Re-measure (feedback loop)

Re-run step 1 at all five widths, in light and dark. Any remaining row in the issues table goes back to step 3. Finish with the free skill's checklist.md.

Output

The issues table per width with the fix, the CSS and markup changes, and the final pass at all five widths.