Breakpoints
A resizable app shell that shows how the layout changes at the system’s breakpoints (576, 768, 992, 1200px).
It uses container queries: CSS rules that react to the width of a box, not the window. Drag the corner or pick a preset. The drawer becomes a rail, and the rail becomes a sidebar. The actions move beside the title, and the side panel appears.
- The Responsive section holds the rules it shows. The real shell uses viewport media queries with the same values.
- Each preset width sits just past a breakpoint, so you can see the change.
- This is a review tool, not a product component.