Density
DensityProvider modes for power-user vs comfortable layouts — scoped subtrees, not arbitrary class overrides.
Foundations · fixture-only
Data-heavy tables and rails
Wrap compact DensityProvider around tables, thread lists, and nav rails where vertical space matters.
Workshop: Agent rail, ObjectList in power-user mode, inbox triage lists.
Fixture data only — behaviour matches production chrome
Comfortable defaults
Use comfortable (or omit provider) for forms, onboarding, and first-run flows.
Workshop: Settings sections, create dialogs, empty-state panels.
Fixture data only — behaviour matches production chrome
Scoped provider boundaries
Nest DensityProvider on the smallest subtree that needs a different mode — avoid flipping the whole app.
Avoid: Toggling density globally when only one panel needs compact rows.
Fixture data only — behaviour matches production chrome
Comfortable vs compact
DensityProvider sets data-density on a subtree; useDensity() reads the active mode.
Comfortable
useDensity() → comfortable
Compact
useDensity() → compact