fix(usage): 修复手机端日志卡片显示不全

[bxb1337]

手机端使用日志卡片会被超长模型名或 User-Agent 撑宽，导致部分内容超出视口、显示不全。

本次修复为手机日志列表显式指定单列布局，限制卡片和徽标宽度，并允许长模型名换行；指标区在小屏幕使用单列、在较宽屏幕使用两列。

范围：仅修改 frontend/src/pages/Usage.tsx 的手机端日志卡片布局。分支基于上游 main，仅包含此修复的一个提交。

验证：原修复已通过 320–1023px 布局及桌面显示检查；提交前重新运行的 70 项现有测试和类型检查均通过。移植到上游最新 main 无冲突，差异检查通过。

Summary by CodeRabbit

• Style
  • Usage-log cards now fit within the available mobile width, with long model names wrapping to avoid overflow.
  • The mobile metrics area displays in a single column on smaller screens and two columns at the sm breakpoint.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 5715c50a-12ba-4acd-a981-aa9ec3b0121b

📥 Commits

Reviewing files that changed from the base of the PR and between b1bfe1b and b85c1f2.

📒 Files selected for processing (1)

• frontend/src/pages/Usage.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The usage page now constrains mobile log-card content, wraps long model names, and displays metrics in one column by default and two columns at the sm breakpoint.

Changes

Usage page mobile layout

Layer / File(s)	Summary
Constrain mobile usage content frontend/src/pages/Usage.tsx	The mobile log-card grid uses one column, and cards and badges are constrained to the available width. Long model names can wrap. The metrics grid uses one column by default and two columns at the sm breakpoint.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: james-6-23

Merge Risk: ⚪ Minimal · up to b85c1

No specific user-facing failure is established by the supplied review context; the change appears mergeable after normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: fixing incomplete display of usage-log cards on mobile devices.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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.}