跳到主要内容

Dialog 超高内容真滚动

版本： 0.2.0 · 类型： ✨ 新功能

问题​

DialogContent 外壳此前用 grid 布局并封顶 max-h-[80vh] overflow-hidden，内容主体包在 overflow-y-auto 里，看起来支持滚动，但长内容实际上不滚动：

  • grid 单列隐式行默认 auto，grid item 默认 min-height: auto，导致 content 行不会收缩到内容高度以下
  • 内层 overflow-y-auto 拿不到受限高度，不触发滚动条
  • 整个 grid 超过 80vh 后被外壳 overflow-hidden 直接裁掉，footer 消失

结果：内容 ≤80vh 正常；内容 >80vh 被裁切且不滚动。

根因​

grid + 子项默认 min-height: auto 使滚动区无法收缩出受限高度，是 flex/grid 滚动容器的经典坑。修复方式是改用 flex column，固定区 shrink-0、滚动区 min-h-0。

改动文件​

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

改动内容​

  • DialogContent 外壳：grid → flex flex-col，封顶 max-h-[80vh] + overflow-hidden 保持不变
  • DialogHeader / DialogFooter：加 shrink-0，确保标题与底部不被压缩、footer 常驻可见
  • Dialog.tsx 标题分割线：加 shrink-0
  • Dialog.tsx 内容包裹层（有/无 padding 两条分支）：加 min-h-0，配合 flex 让滚动区正确收缩并触发 overflow-y-auto
  • 新增「scroll layout」测试组：断言外壳为 flex column（非 grid）、滚动区含 min-h-0 + overflow-y-auto、footer 含 shrink-0
  • 行为效果：内容 ≤80vh 视觉无变化；内容 >80vh 时超出部分在内容区内真滚动，footer 保持可见

备注​

（Linear）