fix(users): prevent large quota values from overflowing

[QuentinHsu]

⚠️ 提交说明 / PR Notice

Important

• 请提供人工撰写的简洁摘要，避免直接粘贴未经整理的 AI 输出。

📝 变更描述 / Description

问题描述

• 用户列表中的额度列宽度不足。
• 当剩余额度和总额度数值较大时，文本会相互挤压并溢出到相邻列。

修复方式

• 将额度列默认宽度调整为 300px，并设置 260px 的最小宽度。
• 使用双列网格展示剩余额度和总额度，增加固定间距并分别左右对齐。
• 将超长额度文本限制在单元格内截断，完整数值仍可通过 Tooltip 查看。
• 将额度展示逻辑提取为独立的 UserQuotaCell 组件。
• 保留零额度状态、额度百分比和进度条颜色逻辑。

测试说明

• 目标文件格式检查通过。
• 目标文件 oxlint 检查通过。
• TypeScript 类型检查通过。
• 前端生产构建通过。
• 已完成登录后页面的视觉验证。

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue，避免将设计取舍、理解偏差或预期不一致直接归类为 bug
• ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

• Closes 用户列表额度字段显示溢出，旧UI显示正常 #6123

✅ 提交前检查项 / Checklist

• 人工确认: 我已亲自整理并撰写此描述，没有直接粘贴未经处理的 AI 输出。
• 非重复提交: 我已搜索现有的 Issues 与 PRs，确认不是重复提交。
• Bug fix 说明: 若此 PR 标记为 Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。
• 变更理解: 我已理解这些更改的工作原理及可能影响。
• 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
• 本地验证: 已在本地运行并通过测试或手动验证，维护者可以据此复核结果。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

📸 运行证明 / Proof of Work

• bunx oxfmt --check src/features/users/components/users-columns.tsx src/features/users/components/user-quota-cell.tsx
• bunx oxlint -c .oxlintrc.json src/features/users/components/users-columns.tsx src/features/users/components/user-quota-cell.tsx
• bun run typecheck
• bun run build

Summary by CodeRabbit

• New Features
  • Added a dedicated quota status display for users.
  • Quota usage now shows remaining and total amounts, usage percentage, and a color-coded progress indicator.
  • Users with no assigned quota see a clear “No Quota” status.

[coderabbitai]

Walkthrough

Changes

User quota display

Layer / File(s)	Summary
Quota cell rendering web/default/src/features/users/components/user-quota-cell.tsx	Adds UserQuotaCell to calculate quota totals and percentages, select progress colors, and render quota details or a “No Quota” badge.
Quota column integration web/default/src/features/users/components/users-columns.tsx	Replaces the inline quota UI with UserQuotaCell, passing the user’s used and remaining quota values.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

I’m a bunny with a quota to show,
With emerald bars that gently glow.
Remaining, total, used in sight,
A tidy tooltip makes it right.
No quota? A badge says so—
Hop, hop, overflow must go!

🚥 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR addresses issue #6123 by refactoring quota rendering to prevent large values from overflowing in the user list.
Out of Scope Changes check	✅ Passed	The changes stay focused on quota cell rendering and overflow handling, with no unrelated functionality added.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main fix: preventing oversized user quota values from overflowing in the user list.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/users-quota-overflow

---

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