Dashboard Layouts

1// Every shell here is the same three regions. Build it once.2function DashboardShell({ nav, bar, children }: ShellProps) {3  return (4    <div className="flex h-dvh overflow-hidden">5      <nav aria-label="Primary" className="w-60 shrink-0 border-r">{nav}</nav>6      <div className="flex min-w-0 flex-1 flex-col">7        <header className="h-14 shrink-0 border-b">{bar}</header>8        {/* min-h-0 is what lets the well scroll instead of the page */}9        <main className="min-h-0 flex-1 overflow-y-auto p-6">{children}</main>10      </div>11    </div>12  )13}1415// Analytics: tiles above a chart, in descending order of urgency16<DashboardShell nav={<Nav />} bar={<DateRange />}>17  <section aria-label="Key metrics" className="grid grid-cols-3 gap-3">18    <Stat label="Revenue" value="$48.2k" delta={12.4} spark={revenue} />19    <Stat label="Active users" value="2,847" delta={3.1} spark={users} />20    <Stat label="Error rate" value="0.42%" delta={-18} spark={errors} />21  </section>2223  <Panel title="Requests per minute" description="All regions">24    <Chart data={rpm} />25  </Panel>26</DashboardShell>2728// Master–detail: selection must NOT move focus into the detail pane,29// or arrow-keying down a queue stops working after the first row.30<div className="flex gap-4">31  <ul role="listbox" aria-label="Leads" onKeyDown={arrowKeys}>32    {leads.map((l) => (33      <li key={l.id} role="option" aria-selected={l.id === selected}>…</li>34    ))}35  </ul>36  <section aria-label="Lead detail">{detail}</section>37</div>

.ds-shell {
  display: flex;
  block-size: 100dvh;
  overflow: hidden;          /* the well scrolls, never the page */
}

.ds-shell__nav { inline-size: 240px; flex: none; }
.ds-shell__nav[data-collapsed] { inline-size: 64px; }

.ds-shell__main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;        /* without this, a wide table pushes the
                                sidebar off screen instead of scrolling */
  flex: 1;
}

.ds-shell__well {
  min-block-size: 0;         /* the flex-child rule that actually makes
                                overflow-y work inside a column */
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* Tiles auto-fit, so the grid degrades by wrapping rather than by
   squeezing six tiles into an unreadable row. */
.ds-stat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Density is a data attribute on the shell, not a separate stylesheet. */
[data-density='compact'] .ds-stat { padding: 10px; }
[data-density='compact'] .ds-table td { padding-block: 4px; }

@media (max-width: 1023px) {
  .ds-shell__nav { display: none; }        /* becomes a drawer */
  .ds-stat-grid { grid-template-columns: 1fr; }
}