Three-column workspace layout

patternactive owner: philip · updated 2026-11-14

Three-column workspace layout

Master–list–detail workspace: left nav, center list, right detail pane. Used by admin consoles, CRMs, and any app where users scan a list then inspect one item.

Use when

• Users work through a collection of records and inspect details frequently.
• The app is desktop-first with a wide viewport.

Structure / rules

• Nav region (left): 200–240px, collapsible on narrow viewports.
• List region (center): default sort newest-first; row selection drives detail.
• Detail region (right): shows the selected record; empty state when nothing selected.
• One .qapp file; regions declared in order nav → list → detail.

Anti-patterns

• Detail as a separate page (breaks scan-and-compare flow).
• More than three columns (crowds the detail pane).

Slots

• {collection} — record type and list ref.
• {detail-fields} — fields shown in the detail pane.

Sources

• factory/forms/form-engine/QAPP.md