Fixed-height dashboard

A fill-height AppShell that pins itself to the viewport: the header never scrolls, and AppShellMain becomes the single internal scroll container. Passing a ref to AppShellMain lets the app own scroll restoration on that element. Reach for this over the auto-height shell when the chrome must stay fixed and the content region scrolls independently.

AppShell

height=fill — pinned to the viewport

Sidebar

the left nav rail

AppShellBody

flex row

AppShellHeader

fixed toolbar — never scrolls

AppShellMain

offset=none, ref'd — the internal scroll container

<AppShell height="fill">
  <Sidebar>
    {/* nav rail */}
  </Sidebar>
  <AppShellBody>
    <AppShellHeader>{/* toolbar */}</AppShellHeader>
    {/* AppShellMain is the scroll container — ref it for scroll restoration. */}
    <AppShellMain offset="none" ref={scrollRef}>
      {children}
    </AppShellMain>
  </AppShellBody>
</AppShell>