Break where the content breaks
Change layout where the content stops fitting, not at device names.
Draft — not yet reviewed by a maintainer
Why it matters
Screens come in every width. A layout that changes where its content needs room works at all of them; one tuned to "tablet" and "phone" breaks in between.
How to check it
Resize from 1440 to 320: no width crushes columns or orphans one card on a row.
The default it guards against
Three pricing cards kept side by side down to 768px because that is the tablet breakpoint, squeezing each one to a narrow strip.
Library items that apply it
Where it comes from
- design.md §12 (breakpoints are behaviour triggers, not device labels)
- Review dimension: mobile usability (docs/quality-gates.md)
Repository paths refer to the Tessli repository ; WCAG references are to WCAG 2.2.