Guidelines
Responsive design
Responsive guidance for Stance: mobile-first layouts, how components adapt on small screens, touch target sizes, and reflow at 400% zoom.
Mobile first
Start at 320px and add layout as space allows. Stance components already adapt:
- Dialogs dock to the bottom of the screen below 640px. Drawers and sheets never exceed the viewport.
- Toasts become full width on phones.
- Horizontal form fields stack labels above controls on small screens.
- Tables scroll inside a focusable, labelled region instead of breaking the page.
- Breadcrumbs collapse middle items; filter bars wrap.
Touch
- Interactive targets are at least 24×24px, and 40px for primary controls.
- Never hide essential actions behind hover. Tooltips are supplementary and do not open on touch.
- Sheets support drag-to-dismiss as well as an explicit close button.
Zoom and reflow
Layouts must reflow at 400% zoom (WCAG 1.4.10) and stay readable with 200% text spacing (1.4.12). Use rem-based tokens, never fixed pixel heights on text containers.