Skip to content

fix(web): Token 统计 / 项目详情 Tab 窄屏布局修复#65

Merged
cocofhu merged 1 commit into
mainfrom
fix/token-stats-mobile-layout
Jul 26, 2026
Merged

fix(web): Token 统计 / 项目详情 Tab 窄屏布局修复#65
cocofhu merged 1 commit into
mainfrom
fix/token-stats-mobile-layout

Conversation

@cocofhu

@cocofhu cocofhu commented Jul 26, 2026

Copy link
Copy Markdown
Owner

Summary

  • ProjectDetailView 顶栏 Tab 改为单行横滑(flex-nowrap + overflow-x-auto)并加大至 min-h-11,保留 border-b-2 选中态
  • TokenStatsPanel:标题与时间窗窄屏分行、窗口按钮 min-h-11;Panel/Trend 补 min-w-0 + overflow-x-clip 防止 Chart.js 横撑
  • TokenDonutChart:窄屏环上图例下、环径约 120px;md 双列与桌面横向布局不回退
  • vitest 锁定 Tab/时间窗/Trend/Donut 布局类(plan g1–g5)

Test plan

  • npx vitest run TokenStatsPanel / TokenCharts / ProjectDetailView.pmSettings
  • 约 390px:项目详情 → 看板,确认无页面横撑、趋势无内部横滚
  • 窄屏横滑可访问全部 Tab;时间窗四档可点
  • 三图顺序趋势 → 构成 → Top10;构成环上图例下
  • 桌面 Tab 下划线与 md 双列观感不回退

Made with Cursor

Align ProjectDetailView tabs and TokenStatsPanel charts with the approved
mobile demo so ~390px viewports no longer overflow or crush touch targets.

Co-authored-by: Cursor <cursoragent@cursor.com>
@cocofhu
cocofhu merged commit 7d62151 into main Jul 26, 2026
10 checks passed
@cocofhu
cocofhu deleted the fix/token-stats-mobile-layout branch July 26, 2026 10:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant