Overview

Drag the sidebar's right edge: below ~8rem the nav collapses to an icon rail (a sidebar container query — no JS state). On a narrow screen the sidebar becomes an overlay drawer. The toolbar below reacts to the main container width (which shrinks as you widen the sidebar), not the viewport — widen the sidebar and the buttons drop their labels.

Card 1

Grid reflows by available width (intrinsic auto-fit).

Card 2

Grid reflows by available width (intrinsic auto-fit).

Card 3

Grid reflows by available width (intrinsic auto-fit).

Card 4

Grid reflows by available width (intrinsic auto-fit).

ResizablePanel

This embedded example places the panel on the right. Drag its edge or focus the separator and use the arrow keys, Home, or End. The bottom control collapses it to a usable rail.

Preview

Select a file to inspect its changes

The same component as a drawer: mode="overlay" fixes it to the viewport edge with a scrim; Escape, the scrim or the edge control close it, and below 960px it spans the full width.