fix(contrib): widen the year select so the year is not clipped to "2··" - #541
Merged
Conversation
The contribution graph's year select carried `max-w-80` (80px), which was enough under Vuetify 2. Vuetify 3's compact select spends more of that box on its own padding and the dropdown arrow, leaving the selection text 18px of the 36px "2026" needs -- so it renders ellipsised as "2··" on every user profile. Measured on cha.fan: at 80px the selection reports scrollWidth 36 against clientWidth 18; at 100px clientWidth is 36 and nothing is clipped. `max-w-100` already exists in app.scss. Another silent Vuetify 2 -> 3 sizing carry-over: no error, no warning, just a wrong-looking control. Co-Authored-By: Claude Opus 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
1 participant
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
The contribution graph's year select renders the year as
2··on every user profile, e.g. https://cha.fan/users/chai_inu.The value is correct —
textContentis"2026"— it's the box that's too small.Cause
ContribGraphs.vue:10carriedclass="max-w-80"→max-width: 80px(app.scss:37). That was enough under Vuetify 2. Vuetify 3'sdensity="compact"select spends more of that box on its own padding and the dropdown arrow, so the selection text is left with a fraction of what it needs.Measured on the live page:
Fix
max-w-80→max-w-100, a utility that already exists inapp.scss:41. Verified in the browser at 100px — "2026" renders in full.Another silent Vuetify 2 → 3 sizing carry-over of the kind CLAUDE.md warns about: no error, no warning, just a wrong-looking control.
Checks
vitest run— 161 passed (run with.envmoved aside, matching CI)eslinton the changed file — cleanvite build— succeeds🤖 Generated with Claude Code