Repository navigation
fix(web): wrap long model names in overview distribution - #20
Merged
Merged
Conversation
On wide desktop layouts the overview model list puts name, amount and share in three grid columns, but the name kept `white-space: nowrap`. Names with a snapshot date such as claude-haiku-4-5-20251001 overflowed into the amount. The name now wraps inside its column, with the color dot aligned to the first line, matching the mobile layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On desktop widths of 1350px and above, the overview 模型分布 list lays out each row as name, amount and share. The name column kept
white-space: nowrap, so dated model names such asclaude-haiku-4-5-20251001overflowed into the amount (189.29K) and became unreadable.Behavior
Long model names wrap inside their column, breaking at hyphens first, and the color dot stays aligned with the first line. Short names are unchanged. This matches how the mobile layout already handles long names. The full identifier stays visible, so dated snapshots remain distinguishable.
Verification
bun test tests→ 344 pass, 0 failbun run buildsucceeds, andbunx prettier --check src/web/desktop.csspassesclaude-haiku-4-5-20251001. The label renders on two lines and its right edge (1256px) stays left of the amount (1264px), so nothing overlaps.🤖 Generated with Claude Code