# Responsive

Check every screen at **375**, **768**, **1024** and **1280** px.

- No horizontal page scroll. Wide content (tables, code, charts) scrolls inside its own container.
- Grids collapse to one column below `sm`. Sidebars become a sheet below `lg`.
- Tables: hide low-value columns below `md`, or switch to a stacked list.
- Touch targets at least 44 px on phones. Hover-only affordances need a tap equivalent.
- Long words, emails and IDs: `min-w-0` on flex children plus `truncate` or `break-words`.
- Sticky headers and footers must not cover more than a fifth of a phone screen.