Breakpoints
Canonical responsive widths (--bp-*) and the mediaQueries helpers.
Canonical widths in
tokens/breakpoints.ts and CSS vars --bp-sm through --bp-xl. @media cannot use var(), so keep module literals in sync (annotate with /* --bp-* */). JS should prefer mediaQueries.maxMd with useMediaQuery.| Name | px | CSS var | JS query | Typical use |
|---|---|---|---|---|
| sm | 640 | --bp-sm | (max-width: 640px) | Dialogs (bottom sheet), page header stack |
| md | 768 | --bp-md | (max-width: 768px) | Phone chrome, BrowseShell, Tracking |
| lg | 900 | --bp-lg | (max-width: 900px) | Mid tables / calendars |
| xl | 1100 | --bp-xl | (max-width: 1100px) | Overview / multi-column collapse |