frontend-responsivelisted

# Make the layout responsive Make the affected UI adapt cleanly from small to large viewports with no overflow, readable type at every size, and touch-friendly targets. ## Steps 1. **Read the lore first.** Call `search_lore` (Memory MCP) for the repo's breakpoint scale, spacing tokens, and responsive conventions (container queries, grid system, mobile-first vs desktop-first). 2. **Work mobile-first.** Start from the smallest target and layer enhancements up through the repo's existing breakpoints — don't invent new ones. 3. **Prefer fluid layout primitives** (flex/grid, `clamp()` type and spacing, intrinsic sizing) over fixed pixel widths and one-off media queries. 4. **Kill overflow.** Constrain media and long text (`max-width`, `min-width: 0`, wrapping); verify no horizontal scroll at any width. 5. **Size for touch.** Interactive targets ≥ 44×44px on touch; verify tap spacing. 6. **Verify across widths.** Check the breakpoints the repo cares about (e.g. 320, 375, 768, 1024, 1440); confirm no overflow and that content reflows sensibly. 7. **Evidence.** Record the verification (screenshots or assertions) via the `record-evidence` skill, run tests + lint, and submit for review. ## Rules - Mobile-first; reuse the repo's breakpoint scale and tokens — no magic pixel values. - No horizontal overflow at any supported width. - Fluid primitives over a thicket of fixed media queries. - Pair with `frontend-a11y` so responsive changes keep focus order and label