Responsive
Tsunami has no responsive utility classes. Each component adapts itself at one of three widths, so the same markup works from a phone to a wide screen.
Breakpoints
CSS variables cannot be used inside a media query, so the widths
are plain rem values written in each component.
They scale with the reader's font size.
| Width | Query | Meant for |
|---|---|---|
24rem |
width < 24rem |
The smallest phones, about 380px and below |
40rem |
width < 40rem |
Phones: components stack and fill the row |
48rem |
width >= 48rem |
Tablets and up: the sidebar sits beside the page |
What changes
- Workspace, Sidebar and Subnav: below 48rem the side panel becomes a popover that slides in.
- Stat, Stepper, Tabs (vertical) and Description list: below 40rem they stack in one column.
- Toast and Bulk action bar: below 40rem they use the full width.
- OTP input: below 24rem the digits move closer so six still fit.
- Container: limits the width on a wide screen, with no change on a phone.
Your own layout
Write your own media queries with the same three widths, and
keep them inside @layer or after Tsunami so they
win. Wide tables and code scroll inside a
Scroll area instead of widening
the page. Add
<meta name="viewport" content="width=device-width, initial-scale=1">
to the page, or phones show it zoomed out.