Layouts
Mobile
The phone is not a squeezed desktop. Under 900px the layout switches to one column with full-width tools, the navigation moves out of the way, and every target stays big enough for a thumb.
Try it on a phone
The real templates, running at phone size. Tap through them — the menu, the tabs, the cards.
Phone rules
The sidebar becomes a drawer behind the ☰ button; the top-bar tabs take their own full-width row; the panel loses its outer margin (8px) and its corners shrink to 20px.
Every row stacks. The only exceptions are figures (two across) and duos (two small cards side by side).
The page head stacks: title, then the tools on their own line, switchers stretched so each choice is a fair tap target.
A tab row too wide for the screen scrolls sideways; it never breaks onto two lines.
Each row turns into a small card: the first column as its title, the others as labelled lines, with a sort control above.
Plots drop to 250px tall; axis text to 10px; tooltips to 180px wide. Wide timelines scroll sideways.
Visible controls are at least 32px (the px laws check it); on touch screens buttons also get an invisible 44px hit area.
What hover shows on a desktop, a tap shows on a phone. Magnets ignore touch; a spotlight only glows while a finger is on the card.
Phones keep the browser’s own momentum scroll; smooth scrolling is for wheels and trackpads only.