Design system/Patterns
Fixed bars and scrolling
Anything that must always be reachable stays fixed, and only the content scrolls: the dialog header and footer, the app header, the dock, the docs sidebar. The page never scrolls horizontally.
Live example
New action
CancelCreate task
Rules
- The form footer (the submit button) is flex-none, so long content doesn't squeeze it.
- Sheets and dialogs have overscroll-behavior: contain so scrolling doesn't reach the page behind.
- A horizontal strip (pills, cards) scrolls inside its own container, with vertical inner padding so shadows aren't clipped.
- The sticky sidebar stays put below the app header, its height is capped to the screen, and it scrolls on its own.
- Section anchors have scroll-margin-top so they don't hide under the app header.
Related pages