fix(settings): 修复窄窗口用量表格列重叠

[Stella-xixi]

这次改了什么

摘要

修复窄窗口下「用量历史」的“按 Agent / harness”和“按模型”表格列重叠问题。为两张表建立最小宽度，并在首列增加溢出边界；空间不足时沿用现有横向滚动容器查看完整数字列，不再继续压缩首列导致名称、标签、表头与相邻列重叠。

变更类型

• feat 新功能
• fix 缺陷修复
• refactor / perf 重构或性能优化
• docs / test / chore 文档、测试或工程维护
• 其他：

范围

• 关联 Issue / 需求：Fixes 窄窗口下「用量历史」表格首列与相邻列及表头发生重叠 #3546
• 本 PR 包含：为 Agent 表设置 520px 最小宽度，为模型表设置 720px 最小宽度；限制首列内容溢出；补充响应式布局回归测试。
• 明确不包含：用量数据聚合、其他设置页面及“最耗 token 的任务”表格调整。
• 用户可见变化：窄窗口中表格列不再重叠；右侧数字列可通过横向滚动完整查看。
• 是否存在 breaking change：无。

UI 变化

平台：Windows 10，Cindy Desktop，CN / zh-CN，窗口最窄状态。

窄窗口初始位置：首列、相邻数字列和表头不再重叠

横向滚动入口：空间不足时可滚动查看右侧完整列

• 引用的设计规范：docs/design-rules/DESIGN.md §5 间距与栅格、§10 Theme System & Token Reference。本次保留既有 12px 列间距与语义 token，不新增颜色或单模式样式；响应式空间不足时通过横向滚动保持信息完整。

怎么验证的

自动验证

pnpm test:unit:related
结果：通过（Desktop related 2）。

pnpm --filter desktop run --if-present typecheck
结果：通过。

手工验证

• Windows 10 / Cindy Desktop / CN / zh-CN。
• 将窗口缩到应用允许的最窄宽度，检查“按 Agent / harness”和“按模型”表格。
• 首列、相邻数字列及表头无重叠。
• Windows 自动隐藏滚动条时，表格仍可横向移动并查看全部右侧列。

未执行的验证

• 未在 macOS 实机验证；改动仅使用跨平台 CSS 布局类，不涉及平台分支。
• 未单独进行 Dark 模式实机目检；改动不涉及颜色，继续复用现有主题 token。

风险

风险分类

• 无已知风险
• SQLite / migration
• system prompt
• 协议兼容
• 权限 / 安全 / 用户数据
• 存量插件兼容（批准状态 / 指纹 / manifest 校验 / 安装布局 / 包格式）
• 原生层 / fingerprint / OTA
• 跨平台差异
• 其他：

影响与回滚

• 影响范围：仅 Desktop 设置 → 用量历史的两张明细表。
• 回滚 / 降级方式：回滚本提交即可；不涉及数据迁移或清理。

提交前检查

• 已 review 完整 diff
• 每个 commit 都带 DCO 签名（git commit -s，见 DCO）
• UI 改动已在「UI 变化」注明引用的设计规范章节（不涉及 UI 则跳过）
• 未提交凭证、令牌或授权文件
• 已补充必要文档
• 已确认测试结果或说明未执行原因

[greptile-apps]

Greptile Summary

此 PR 为用量历史中的 Agent 和模型明细表增加最小宽度及首列溢出边界，使窄窗口通过横向滚动保留数字列可读性。

• Agent 表最小宽度设为 520px，模型表设为 720px
• 首列新增 overflow-hidden，防止名称和标签侵入相邻数字列
• 新增两组响应式布局测试，但目前仅覆盖 CSS 类名

Confidence Score: 4/5

此 PR 看起来可以安全合并，但建议将新增测试提升为真实窄容器下的滚动与不重叠行为验证。

生产调用链已经由直接的 overflow-x-auto 容器承接新增表格最小宽度，未发现阻塞性故障；剩余问题是回归测试只锁定类名，无法捕获实际布局回退。

Files Needing Attention: apps/desktop/src/renderer/components/settings/usage/tests/UsageBreakdownTables.test.tsx

Important Files Changed

Filename	Overview
apps/desktop/src/renderer/components/settings/usage/UsageBreakdownTables.tsx	最小宽度和首列裁剪与现有 overflow-x-auto 调用链正确配合，未发现当前可达的布局缺陷。
apps/desktop/src/renderer/components/settings/usage/tests/UsageBreakdownTables.test.tsx	新测试覆盖新增类名，但未验证真实窄容器中的溢出、滚动和列边界行为。

Prompt To Fix All With AI

### Issue 1
apps/desktop/src/renderer/components/settings/usage/__tests__/UsageBreakdownTables.test.tsx:34-35
**响应式测试仅锁定类名**

这些用例没有渲染生产环境中的 `overflow-x-auto` 包裹层，只检查 `min-width` 和 `overflow-hidden` 类名，因此列重新重叠、被裁剪或无法横向滚动时测试仍可通过；请在窄容器中验证实际溢出与滚动行为。

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "fix(settings): prevent usage table overl..." | Re-trigger Greptile}

[MagicLizi]

@Stella-xixi 👋 这个 PR 还有 1 条 review conversation 没 resolve(apps/desktop/src/renderer/components/settings/usage/tests/UsageBreakdownTables.test.tsx),auto-review 因此暂时跳过、没法继续审查 / 合并。

如果你已经按评论改完或回应了,请到对应 thread 上点 Resolve conversation;全部 resolve 后,下一轮 auto-review 会自动重新审查这个 PR。

[MagicLizi]

这个 PR 会改变窄窗口下用量历史表格的可见布局（最小宽度 + 横向滚动），已提交维护者确认。请维护者在本 PR 上 Approve 放行；若要改，请 Request Changes。讨论 issue：#3757