Layout wireframe

app-shell

Viewport-locked application shell. Fixed sidebar, fixed top bar, one scrolling content pane. The page itself never scrolls — see LAYOUT.md for why that matters. Annotations in grey are the real Tailwind values; draw them exactly.

Desktop · ≥ xl (1280px+)

header · h-14 · never scrolls

main · flex-1 min-w-0 overflow-y-auto — THE scroll region. Sticky children use top-0, not top-14.

<page header> breadcrumb · h1 · description · actions · may be sticky top-0

<primary content> min-w-0 flex-1 · max-w-7xl mx-auto · cards, tables, forms, lists

wide content scrolls inside its own overflow-x-auto container — the shell never scrolls sideways

scroll to confirm: the sidebar and top bar stay put

Breakpoint behaviour

This is where layouts actually differ from one another, and where implementers most often guess wrong. Resize this window from ~360px to full width and check the shell above against these diagrams.

< md · under 768px

Sidebar hidden → overlay sheet + scrim. Rail hidden, contents move inline below body. Gutter px-4.

☰ opens sidebar

page header

primary content

rail content, inline

Targets grow to 44px. Shell may relax to normal document scrolling here.

md – lg · 768–1024px

Sidebar collapses to a w-14 icon rail. Labels become hover tooltips. Rail still hidden.

w-14 icon rail

lg – xl · 1024–1280px

Full w-64 sidebar. Right rail still hidden — content takes the full remaining width.

w-64 sidebar · max-w-7xl content

≥ xl · 1280px+

Everything visible. Right rail appears at w-72 with its own scroll.

w-64 + flex-1 + w-72

Scroll model

Region	Declaration	Behaviour
html, body	h-screen overflow-hidden	Never scroll. This is what makes it a shell.
Sidebar nav	flex-1 overflow-y-auto	Own scrollbar. Brand and user menu are shrink-0 and stay pinned.
Top bar	h-14 shrink-0	Fixed. Never moves, never scrolls.
Content pane	flex-1 min-w-0 overflow-y-auto	The primary scroll region. Sticky children resolve against this, so they use top-0.
Right rail	w-72 shrink-0 overflow-y-auto	Scrolls independently once taller than the pane.
Wide content	overflow-x-auto	Tables and code scroll inside themselves. The shell never scrolls sideways.

min-w-0 is load-bearing. Without it on the flex children between the shell and the content, a wide table or a long unbroken string pushes the content pane past the viewport and produces a horizontal scrollbar on the whole shell. This is the most common bug in this layout.