电话 tab 右侧嵌套滚动条¶

现象（用户截图 v0.10.114）¶

切到「数据 → 官网列表 / 邮箱列表 / 手机列表」tab 时，右侧出现两个滚动条： - 外层一个（容器滚动） - 内层一个（DataGrid 滚动）

横向也类似 —— 两层都能拖。

根因¶

src/sections/data/data-view.tsx:689 (v0.10.116 前)：

<Box sx={{ flex: 1, minHeight: 0, overflow: 'auto' }}>   {/* ← 外层 overflow:auto */}
  {tab === 'website' && tableContainer(
    <ClientDataTable ... />                                {/* ← MUI DataGrid 内置滚动 */}
  )}
</Box>

双滚动来源： 1. 外层 <Box overflow: 'auto'> 是为了"内容超出时滚动" 2. ClientDataTable（MUI DataGrid）自身有完整的滚动逻辑（virtualized 行 + sticky header + footer）

两套滚动共存，用户拖外层 → 内层不动 → 拖内层 → 内层动外层不动 → 混乱。

修复（v0.10.117）¶

<Box sx={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>   {/* auto → hidden */}

外层只负责 layout（flex grow + minHeight 让 DataGrid 知道可用高度），滚动控制全交给 DataGrid。 DataGrid 已经有 virtualized + sticky header + sticky pagination，体验更好。

设计反思¶

这是 ISSUE-0007 / 0020 / 0069 的家族 bug 第 4 次出现。同类历史： - ISSUE-0007（v0.10.x 早期）：设置页右侧双滚动条 - ISSUE-0020（v0.10.x）：设置页双滚动条二次修复 - ISSUE-0069（v0.10.x）：data-view HTTP 列 + 嵌套滚动条 - ISSUE-0078（本次）：data-view 官网/邮箱/电话 tab

家族根因：React + flex + MUI DataGrid 的组合，外层不能 overflow: 'auto'。

通用规则（沉淀）¶

容器嵌套 DataGrid 时： - 外层 Box：flex: 1, minHeight: 0, overflow: 'hidden'（让 DataGrid 知道有限高度） - DataGrid：自己控制全部滚动（virtual rows） - ❌ 错误：overflow: 'auto' 让外层也能滚（必然双条）

加入 docs/rules/ui-change-pre-check.md 案例 5。

教训¶

DataGrid / 任何 virtualized 列表嵌套外层 = 必查 overflow
4 次复发说明 review 没 grep overflow: 'auto' 附近的容器层级 — 应该写自动检测
用户截图反馈是发现率 100%，但等用户发现成本太高 — 应该 dogfood 检查