Three-pane list-detail layout. Left folder rail, middle item list, right detail pane. All scroll independently.
On mobile, the panes become a navigation stack — not just responsive CSS, actual routing.
See LAYOUT.md for why that matters.
Desktop · ≥ lg (1024px+)
<search input>
<sort>
overflow-y-auto — independent scroll. Items are multi-line rows.
← selected · border-l-4 · bg-accent/10
scroll to confirm: rail and list header stay put
w-80 (md), w-96 (lg) · shrink-0
Archive
Delete
Move
Reply
Forward
overflow-y-auto — independent scroll. Sticky header is top-0 (resolves against this pane, not viewport).
<item metadata>from · to · subject · timestamp · labels
<item body>message content, formatted with typography styles
<attachments>
file.pdf
image.png
scroll to confirm: detail header stays at top of this pane
main · flex-1 min-w-0
Scroll regions
Region
Behaviour
html, body
Never scroll. Root is h-screen overflow-hidden.
Left rail nav
overflow-y-auto — scrolls when folder tree exceeds viewport height.
List pane
overflow-y-auto — primary list scroll region. Header is sticky top-0 within this pane.
Detail pane
overflow-y-auto — primary detail scroll region. Header is sticky top-0 within this pane.
Each pane scrolls independently. Sticky elements use top-0 because they resolve against their scroll container, not the viewport.
Breakpoint behaviour
Critical: On mobile, the panes do not just collapse — they become a navigation stack with actual routing.
The list is the landing view. Tapping an item navigates to the detail view with a back button. List scroll position is preserved.
This requires view routing, not just responsive CSS. Resize from ~360px to full width to verify.
< md · under 768px
Navigation stack model. Rail hidden (☰ overlay). List is the landing view. Detail slides in when item is tapped.
List view (landing):
☰search
← tapping opens detail →
Detail view (navigated):
← back
metadata
body content
Back button returns to list with scroll position preserved. Requires actual routing, not just CSS.
md – lg · 768–1024px
Rail hidden (or w-14 icon-only). List w-80 + detail visible. Standard three-pane selection model.
Clicking item in list updates detail in place. Empty state when nothing selected.
≥ lg · 1024px+
All three panes visible. Rail w-56, list w-96, detail flex-1. Full three-pane layout.
Three independent scroll regions. Each pane gets its own scrollbar when content exceeds viewport.
Special states
No selection (md and up)
Detail pane shows centered empty state when nothing is selected.
"Select a message to read"
Multi-select
Detail pane replaced by bulk actions toolbar. Mobile: sticky footer bar.