ISSUE-0081:DataGrid 底部分页器被裁掉看不见¶
现象(用户截图 v0.10.119)¶
切到「数据 → 官网列表 / 邮箱列表」tab 时,看不到底部分页器。 没有页码、没有"跳至 N 页"、没有"X 条/页"选择器。
根因 — v0.10.117 修嵌套滚动的副作用¶
修 ISSUE-0078 时把外层 Box 从 overflow:'auto' 改成 'hidden':
<Box sx={{ flex: 1, minHeight: 0, overflow: 'hidden' }}> {/* v0.10.117 改的 */}
{tab === 'website' && tableContainer(
<ClientDataTable ... />
)}
</Box>
而 tableContainer 用固定 height:
const tableH = Math.max(360, windowHeight - 240);
const tableContainer = (children) => (
<Box sx={{ height: tableH, mx: 1.5, mt: 1 }}>{children}</Box>
);
问题: 1. 外层 flex:1 实际高度可能 < tableH(小窗口 / 任务栏顶部高) 2. tableContainer 固定 tableH → 超出外层 3. 外层 overflow:'hidden' → 超出部分被裁 4. DataGrid 底部的分页器正好在裁切区
修复(v0.10.120)¶
const tableContainer = (children) => (
<Box sx={{
height: '100%', // 跟随 flex:1 自适应
mx: 1.5, mt: 1,
display: 'flex', flexDirection: 'column' // 让 DataGrid flex grow
}}>
{children}
</Box>
);
不再依赖 windowHeight 算固定值,跟随 flex 容器实际高度。DataGrid 自动 fit 父容器 + 保留分页器底部。
教训¶
- 改 layout 时要测各种窗口高度:windowHeight - 240 在小窗口 / 低分辨率会负数
- flex 布局优于固定 height:父容器决定高度,子组件 100% 跟随
- 同 layout family bug 第 5 次(ISSUE-0007/0020/0069/0078/0081)— 但 v0.10.119 scan:nested-scroll 已加自动检测,下次能拦
- 这是修 ISSUE-0078 的回归 — 「同时跑 dogfood + 多窗口尺寸测试」该列入 sinking checklist