fix(header): lift avatar out of the stats pill#6106
Merged
Conversation
The avatar lived inside the surface-float pill with only the reputation button's right padding between the number and the profile picture. Move it to a sibling of the pill so it gets a proper 8px breathing gap, and revert reputation to the symmetric !px-1.5 the other two stats use. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Add `border border-border-subtlest-quaternary` around the stats pill to match the bordered surfaces used elsewhere (e.g. the sidebar header stats container). Bump the reputation icon to IconSize.Medium so its visible content scales closer to the streak and cores glyphs. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous border-border-subtlest-quaternary (~8% opacity) was barely visible. Switch to border-border-subtlest-tertiary (~20% opacity), which is close to the value the Float-variant header buttons (jobs, notifications) ship with. Grow the avatar from ProfileImageSize.Medium (32px) to Large (40px) so it matches the pill's h-10 height. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Each Small Button shipped at h-8 inside an h-10 pill with px-1, so the hover background had a 4px halo on every side. Switch the pill to items-stretch, drop its horizontal padding, clip with overflow-hidden, and let each Button take !h-full !rounded-none so the hover fills its slot edge to edge. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The parent HeaderButtons container uses gap-3 (12px) between top-level items, but the pill-to-avatar gap inside ProfileButton was gap-2 (8px). Bump it so every gap in the right header strip is the same 12px. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Buttons inside the stats pill were getting cramped on both sides with !px-1.5 (6px), and the reputation icon's built-in transparent inset (~4px when scaled to 28px) made its left side read as larger than its right. - Streak: !pl-2 !pr-2.5 (8/10) so the 2px icon-centering padding lands at a visible 10px on the left, matching pr-2.5. - Cores: !px-2.5 (10/10), symmetric. - Reputation: !pl-1.5 !pr-2.5 (6/10) so the ~4px icon inset lands at a visible ~10px on the left, matching pr-2.5. Also drop the compact-only !px-1.5 hardcoded inside ReadingStreakButton — callers now pass their own padding when they need to override the design-system default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Move the profile picture back into the surface-float pill as the rightmost slot so it lives in the same bordered container as the three stats. Render it through Button (Tertiary, Small) so its hover state fills the slot edge-to-edge like the other stats, and keep the same click handler as the reputation button — both open the profile menu, matching the production behaviour. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wrap the reputation badge and the profile picture in a single Button so they share one hover state instead of looking like two adjacent controls that do the same thing. Use !pr-1 (4px) on the right so the gap between the avatar and the button edge equals the 4px the centered 32px avatar leaves above and below it. Trim the left padding on streak and cores (!pl-1.5 and !pl-2) so the gaps between the four slots tighten consistently. The reputation reward-target span keeps the ref so the rep counter still pulses on impact without scaling the avatar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Combined profile button: drop right padding (!pr-0) and override the Button gap to 0 (!gap-0) so the reputation icon hugs its number like the streak does, and the avatar's right edge lands the same distance from the pill as its top edge does. - Grow avatar to ProfileImageSize.Large (40px) so it fills the pill height — top/bottom/right visible spacing all reduce to the 1px pill border. - Cores: !pl-1.5 (was 2) to tighten the gap from the streak. - Combined profile: !pl-0.5 (was 1) to tighten the gap from cores. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Shrink the avatar from 40px (Large) to 36px (w-9 h-9) so it leaves 2px of breathing room on the top, right, and bottom inside the pill (1px button padding + 1px pill border). Also override the avatar's border-radius to rounded-10 (down from the size's default rounded-12). With the avatar inset 2px from the pill's rounded-12 outer corner, the UX nested-radius rule says the inner shape should be radius - inset = 12 - 2 = 10. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switch the combined profile button's !pr-px (1px) to !pr-0 so the avatar sits flush against the button's right edge — only the pill's 1px border remains between the avatar and the pill outer edge. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add a brief explanatory comment above the pill render so future readers know why streak, cores, reputation, and the avatar share the same bordered container. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
idoshamun
approved these changes
May 27, 2026
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
2 participants
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.
Summary
Follow-up to #6097. The avatar lived inside the same
bg-surface-floatpill as the three stat buttons, so the only space between the reputation number and the profile picture was the reputation button's right padding (~6px) — too tight, and visually inconsistent with the breathing room around the rest of the header items.This PR:
gap-2(8px), so it reads as its own control next to the stats group.!px-1.5now that it no longer needs the asymmetric!pl-0.5it used to compensate for being adjacent to the avatar.No behavior change — clicking the avatar still opens the profile menu.
Test plan
🤖 Generated with Claude Code
Preview domain
https://claude-polish-header-stats-gap.preview.app.daily.dev