Skip to main content

Dialog true scrolling for tall content

Version: 0.2.0 · Type: ✨ Feature

Problem​

The DialogContent shell previously used a grid layout capped with max-h-[80vh] overflow-hidden, with the content body wrapped in overflow-y-auto. It looked like it supported scrolling, but long content did not actually scroll:

  • A single-column grid's implicit rows default to auto, and grid items default to min-height: auto, so the content row would not shrink below its content height
  • The inner overflow-y-auto never received a constrained height, so no scrollbar was triggered
  • Once the whole grid exceeded 80vh, the shell's overflow-hidden clipped it directly and the footer disappeared

Result: content ≤80vh worked fine; content >80vh was clipped and did not scroll.

Root Cause​

grid plus the children's default min-height: auto prevents the scroll area from shrinking to a constrained height — a classic pitfall of flex/grid scroll containers. The fix is to switch to flex column, with shrink-0 on fixed areas and min-h-0 on the scroll area.

Changed Files​

  • packages/design/src/components/ui/dialog.tsx
  • packages/design/src/components/Dialog/Dialog.tsx
  • packages/design/src/components/Dialog/Dialog.test.tsx

Changes​

  • DialogContent shell: grid → flex flex-col; the cap max-h-[80vh] + overflow-hidden stays unchanged
  • DialogHeader / DialogFooter: add shrink-0 to ensure the title and bottom are not compressed and the footer stays visible
  • Dialog.tsx title divider: add shrink-0
  • Dialog.tsx content wrapper (both with- and without-padding branches): add min-h-0 so that, together with flex, the scroll area shrinks correctly and triggers overflow-y-auto
  • Added a "scroll layout" test group: asserts the shell is flex column (not grid), the scroll area contains min-h-0 + overflow-y-auto, and the footer contains shrink-0
  • Behavioral effect: content ≤80vh has no visual change; for content >80vh the overflow truly scrolls within the content area and the footer stays visible

Notes​

(Linear)