Jyotisha/docs/tasks/TASK-chart-table-span-20261023.md

TASK · 星盘页本命 / 月亮盘的行星表被挤进左栏（issue #102，2026-10-23）

基线

• origin/staging：写本单时为 9049b5e99。开工时以当时的 origin/staging 为准。
• 执行方：Grok（Windows + Docker）。分支 codex/chart-table-span-20261023，只推这一个分支。
• BUG 编号：开工时运行 grep -oE "BUG-[0-9]+" docs/BUG_HISTORY.md | sort -t- -k2 -n | tail -1，从下一个号起（写本单时最大号是 BUG-1420）。

事故实证

• 现象：桌面宽度（≥1024px）下，星盘页选「本命」或「月亮」时，行星表只占左栏，和盘一样宽（约 466px）。宿主、pada、状态三列要横向拖动才看得到；右栏在参数卡下面空着。D2–D60、Bhava、行运的表都正常。
• 布局规则：frontend/src/app/globals.css 的桌面媒体段（@media (min-width: 1024px)，符号 .chart-page-planet-table-wrap, .chart-page-varga-table-block { grid-column: 1 / -1; }）把这两个类名排成跨两栏的整行。
• 网格结构：frontend/src/components/chart-page/chart-vedic-tab.tsx 的 VedicLayout 网格下有三类直接子项：.chart-page-vedic-stage（盘）、.chart-page-params（参数卡）、{children}（表）。
• 出问题的地方：同文件 NatalTable 在 #87（d2edf8b7a，「上升的状态格改成「/」」）里被外包了一层 ChartSymbolHelp，渲染出来是 <div class="chart-page-symbol-help">。网格的直接子项变成了这个 div，上面的跨栏规则匹配不上，表就被自动排进了左栏第二行。
• 为什么分盘没事：ChartTypeBody 里分盘外面多了一层 .chart-page-varga-table-block，仍然命中跨栏规则。本命、月亮两处直接放 NatalTable，所以出事。
• 违反的设计：frontend/DESIGN.md 写着「桌面（≥1024）盘面与参数表左右并排，行星表是跨两列的整行——它的列宽需要完整版心」。
• 为什么没拦住：#87 的进度记录（docs/tasks/PROGRESS-chart-ascendant-slash-20261021.md）写明没跑全量 npm test、没跑 next build，也没登录后看页面；而且现有测试没有一条断言 grid-column。

根因

跨栏规则是按「表格外层恰好是某个类名」写的，网格自己并不掌握「第三行是整行」这件事。所以任何人往表外面再包一层，布局就会悄悄坏掉。这一次是 #87 包了一层 ChartSymbolHelp，下一次可能是别的。

决策记录

• 产品 2026-10-22 把本问题提成 issue #102，2026-10-23 要求先规划。
• 按 AGENTS.md §5「修在根因上」，不采用「在跨栏规则里再补一个 .chart-page-symbol-help 类名」这种对症补丁。改为让网格自己掌握结构：VedicLayout 用一个固定的整行容器装 children，跨栏规则只认这个容器。
• 不改表格的列数、列宽，不动 D1 的字节冻结。

硬红线

1. 不改表格内容、列、列宽，也不改 ChartSymbolHelp 的行为（「/」的说明气泡必须照常弹出，不能被裁掉）。
2. 手机端不得回归 BUG-1083：390px 宽时页面 scrollWidth 必须等于 390，表格只能在自己的盒子里横滚。
3. chart-varga-table.test.tsx 的 D1 字节冻结、chart-page-mobile-width-20260929.test.ts 的现有断言都要照常通过。若必须改，按「原值 / 新值 / 原因」三栏写。
4. 本单只修布局。组件库迁移 K3（#107）会整体改造这一页，本单不要提前换组件。

任务

T1 网格自己掌握整行

• VedicLayout 里把 {children} 包进一个固定容器，比如 <div className="chart-page-vedic-tables">。这个容器永远是网格的第三个直接子项。
• globals.css 桌面段的跨栏规则改为针对这个容器（grid-column: 1 / -1）。原来那两个类名如果别处不再需要跨栏，就从规则里删掉；删之前先按 AGENTS.md §7 第 8 条 grep 源码文本合同测试。
• 容器加 min-width: 0，保证窄屏时表格只在自己的盒子里横滚。
• ChartTypeBody 里分盘、Bhava、行运的 .chart-page-varga-table-block 保持不变。它们现在落在新容器里面，不再负责跨栏。

验收：在 1024px、1280px 宽下，「本命」「月亮」「D9」「Bhava」「行运」五种盘型的表都占满整行，宿主、pada、状态三列不用横拖就看得到。

T2 回归测试

• 新增测试：分别渲染 ChartVedicTab 的 D1、MOON、D9、BHAVA、TRANSIT，断言 .chart-page-vedic-layout 恰好有三个直接子项，并且第三个是 .chart-page-vedic-tables。
• 在同一个测试文件里，断言 globals.css 的桌面媒体段包含 .chart-page-vedic-tables { grid-column: 1 / -1; }（或等价写法）。
• 以后谁再往表外包东西，这两条断言就会失败。

T3 文档

• docs/BUG_HISTORY.md 新增一条：回归来源 #87，根因写「跨栏按类名而非结构」，防复发写上面 T2 的两条断言。
• frontend/DESIGN.md 星盘页一节补一句：「表格区由 VedicLayout 的整行容器承载，不靠表格自身类名跨栏。」
• CHANGELOG.md 写一行。

开工前置命令

git fetch origin --prune
git worktree add -b codex/chart-table-span-20261023 .worktrees/chart-table-span-20261023 origin/staging
cd .worktrees/chart-table-span-20261023 && git status -sb
cd frontend && npm ci && ./node_modules/.bin/tsc --noEmit && npm run lint
./node_modules/.bin/tsx --test tests/chart-page-view.test.tsx tests/chart-varga-table.test.tsx tests/chart-page-mobile-width-20260929.test.ts   # 记下基线

验收分工

• Grok 自跑：
  • tsc --noEmit；
  • npm run lint；
  • 上面三个测试文件加新测试；
  • npm run build，记录 / 是否 Static 和首屏 gzip；
  • 在本机浏览器 1280px 和 390px 宽下各截一张本命盘页面的图，附在回报里。
• Claude 验收时跑：
  • 前端全量 npm test，和基线逐条对比（#87 当时就是漏了这一步）；
  • 复核截图。
• 真机清单：docs/testing/chart-table-span-20261023.md，写两步：宽屏看本命和月亮的表是不是整行；手机上页面不横向滚动。