Components · Shell — split rail

Shell with right rail

The everyday two-region work layout: a primary content well beside a contextual right rail / inspector, built on the resizable SplitView. A draggable separator (grip on hover / focus) sets the balance; the aux rail is collapsible while the primary always fills the remainder. Below md the row abandons the split for a vertical stack — the primary leads, the rail becomes a closed drawer.

Split shell · primary · separator · aux inspector
primary · flex-1 · min 20% · never collapses
Transport run · TR-4471

Bakersfield → Portland

6 beagles · departs Fri 7:00 AM · lead Marisol Reyes

Next up — confirm the Portland foster can receive all 6 by 6:00 PM Saturday.
  • In transit — passed Redding, on schedule
  • Loaded & departed Bakersfield intake
  • Crates + vet paperwork checked by Wei Chen
  • Run assigned to Transport team

The separator is pinned :focus — its line goes accent and the grip chip appears; drag or ← → resizes, Home / End jump to the min / max, Enter toggles the aux rail collapsed. Region roles are annotated in each pane's corner. Sizes are flex weights (72 / 28), so a collapsed rail is just weight 0 and the primary reflows to fill.

< md — vertical stack · aux becomes a drawer
primary · in flow

Bakersfield → Portland

The non-collapsible region leads the stack, full-width.

Below the md breakpoint the split is abandoned: non-collapsible panes render in flow (primary first) and each collapsible pane becomes a closed aria-expanded disclosure drawer, so the content leads on small screens.

primaryThe main region — collapsible:false, flex-1, min 20%. Always fills whatever the asides leave. This is where the routed page body lives.
separatorA focusable role="separator" (WAI-ARIA window-splitter): aria-orientation="vertical" + aria-valuemin/max/now. Pointer drag, arrow-key nudge, Home/End, Enter to collapse. Grip shows on hover / focus.
end (aux)The contextual right rail / inspector — collapsible, default 28%, min 8%. Collapse toggles it to weight 0; its header carries the collapse control.
responsiveuseIsMobile (below md) swaps the row for a vertical stack — primary in flow, aux as a closed disclosure drawer. Sizes persist via persistKey to localStorage.

Source · src/components/ds/layout/SplitView.tsx (separator · pointer + keyboard resize · collapse · mobile stack) · PaneLayout.tsx (the primary / start / end preset) · composed on Surface · exported from @/components/ds/layout.