feat: add desktop horizontal scroll for wide card tables

[MisonL]

📝 变更描述 / Description

• 为使用 CardTable 的桌面端宽表补上真正可拖动的横向滚动容器。
• 仅在显式声明 scroll.x 且为桌面端时启用，不影响未声明横向滚动的表格。
• 不改单页列定义与分页逻辑，只补齐缺失的滚动承载层与滚动条样式。

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix)
• ✨ 新功能 (New feature)
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

• 无

✅ 提交前检查项 / Checklist

• 人工确认: 我已亲自撰写此描述，去除了 AI 原始输出的冗余。
• 深度理解: 我已完全理解这些更改的工作原理及潜在影响。
• 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
• 本地验证: 已在本地运行并通过了测试或手动验证。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

📸 运行证明 / Proof of Work

• cd web && bunx prettier src/components/common/ui/CardTable.jsx src/index.css --write
• cd web && PATH=./node_modules/.bin:$PATH eslint src/components/common/ui/CardTable.jsx
• cd web && PATH=./node_modules/.bin:$PATH vite build

[coderabbitai]

Walkthrough

On non‑mobile renders, CardTable detects horizontal scrolling via finalTableProps?.scroll?.x. If present it extracts id, className, and style, computes an inner wrapper width (mapping 'max-content'), and wraps the <Table> in an outer .card-table-desktop-scroll and inner .card-table-desktop-scroll-inner with inline sizing.

Changes

Cohort / File(s)	Summary
Desktop Table Horizontal Scrolling web/src/components/common/ui/CardTable.jsx, web/src/index.css	CardTable checks finalTableProps.scroll.x; when set it removes id/className/style from table props, wraps the <Table> in an outer scroll container and an inner width-constraining div (maps 'max-content' to 'max-content'). CSS adds .card-table-desktop-scroll / .card-table-desktop-scroll-inner with horizontal scroll, hidden vertical overflow, and custom scrollbar styles.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I twitched my whiskers, gave a hop,

Tables widen now — no more a stop.
A cozy wrap, a scroll so slight,
Rows slide easy in the pale moonlight.
Hooray for tidy desktop flight! 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: add desktop horizontal scroll for wide card tables' directly and clearly summarizes the main change: adding horizontal scrolling functionality to desktop CardTable components for wide tables.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

web/src/index.css (1)

845-871: Consider Firefox scrollbar styling parity for desktop tables.

Current scrollbar styling is WebKit-only. Adding Firefox equivalents improves cross-browser consistency for the same feature.

Optional enhancement

 .card-table-desktop-scroll {
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--semi-grey-2), 0.3) transparent;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@web/src/index.css` around lines 845 - 871, The WebKit-only scrollbar styles
in .card-table-desktop-scroll lack Firefox equivalents; add Firefox-specific
properties to .card-table-desktop-scroll (e.g., scrollbar-width: thin;
scrollbar-color: <thumb-color> transparent) so the thumb color and track
transparency match the WebKit rules, and optionally add a :hover state by
toggling scrollbar-color on hover of .card-table-desktop-scroll to mirror
::-webkit-scrollbar-thumb:hover behavior. Ensure you reference and update the
.card-table-desktop-scroll and .card-table-desktop-scroll:hover selectors so
Firefox shows a thin, semi-transparent thumb and transparent track consistent
with the existing WebKit styling.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@web/src/components/common/ui/CardTable.jsx`:
- Around line 89-98: The new outer wrapper in CardTable (the JSX that renders
the outermost div around card-table-desktop-scroll and
card-table-desktop-scroll-inner) prevents consumer classes applied to the Table
from affecting the actual scroll container; update CardTable so that consumer
styling/className/classNames passed to the Table are preserved on the outermost
scroll container instead of only on the inner table node — for example, forward
the incoming className/props from the Table to the outermost div (or merge
tableNode.props.className into the outer wrapper) in the CardTable component so
radius/clipping (e.g., rounded-xl overflow-hidden) still apply in horizontal
mode.

---

Nitpick comments:
In `@web/src/index.css`:
- Around line 845-871: The WebKit-only scrollbar styles in
.card-table-desktop-scroll lack Firefox equivalents; add Firefox-specific
properties to .card-table-desktop-scroll (e.g., scrollbar-width: thin;
scrollbar-color: <thumb-color> transparent) so the thumb color and track
transparency match the WebKit rules, and optionally add a :hover state by
toggling scrollbar-color on hover of .card-table-desktop-scroll to mirror
::-webkit-scrollbar-thumb:hover behavior. Ensure you reference and update the
.card-table-desktop-scroll and .card-table-desktop-scroll:hover selectors so
Firefox shows a thin, semi-transparent thumb and transparent track consistent
with the existing WebKit styling.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 91776a07-15a1-4709-847b-ab823e672908

📥 Commits

Reviewing files that changed from the base of the PR and between deff59a and 5e7d3ed.

📒 Files selected for processing (2)

• web/src/components/common/ui/CardTable.jsx
• web/src/index.css