Responsive Layout

Overview

Most SaaS apps share one shell: a collapsible sidebar, a sticky topbar, and a scrollable content area. Get the shell right with Flexbox/Grid and a mobile-first approach, and every page inside inherits good behavior. Reach for container queries when a component must adapt to its container, not the viewport.

When to use

• Building the application frame (sidebar + topbar + content).
• A layout breaks on mobile or wastes space on wide screens.
• A component needs to reflow based on available width, not screen size.

App shell pattern