Skip to content

fix(header): keep profile-completion dot visible inside the stats pill#6108

Merged
idoshamun merged 3 commits into
mainfrom
claude/fix-profile-indicator-clipped
May 28, 2026
Merged

fix(header): keep profile-completion dot visible inside the stats pill#6108
idoshamun merged 3 commits into
mainfrom
claude/fix-profile-indicator-clipped

Conversation

@tsahimatsliah
Copy link
Copy Markdown
Member

@tsahimatsliah tsahimatsliah commented May 28, 2026

Summary

Follow-up to #6106. The stats pill uses `overflow-hidden` so the hover backgrounds round cleanly at the pill's `rounded-12` corners. That same clip was hiding the bottom half of the yellow profile-completion indicator that `ProfilePictureWithIndicator` positions half outside the avatar via `translate-y-1/2`.

This PR:

  • Renders `ProfilePicture` directly inside the combined profile `Button` (no `ProfilePictureWithIndicator` wrapper).
  • Wraps the pill in a `relative` outer container.
  • Lifts the indicator dot out to a sibling of the pill, absolute-positioned at `right-[31px] -bottom-1` so it lands at the same visual spot as the avatar's bottom-left corner — without being affected by the pill's overflow clip.

Reported via in-app feedback (Linear).

Test plan

  • As a user whose profile is incomplete, open the webapp and confirm the yellow dot appears fully at the bottom-left of the avatar inside the header stats pill.
  • As a user with a completed profile, confirm no dot is shown.
  • Confirm clicking the avatar/reputation still opens the profile menu and the streak / cores hover states still fill their slots cleanly.

🤖 Generated with Claude Code

Preview domain

https://claude-fix-profile-indicator-cli.preview.app.daily.dev

The stats pill uses overflow-hidden so the hover backgrounds round
cleanly at the pill's rounded-12 corners. That same clip was hiding
the bottom half of the yellow profile-completion indicator, which
ProfilePictureWithIndicator positions half outside the avatar via
translate.

Render ProfilePicture directly inside the combined profile Button,
and lift the indicator dot out to a sibling of the pill anchored
to a relative outer wrapper. Positioned at right-[31px] -bottom-1,
the dot lands at the same visual spot as the avatar's bottom-left
corner without being affected by the pill's overflow clip.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview May 28, 2026 10:24am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored May 28, 2026 10:24am

Request Review

In compact mode the streak's WarningIcon was rendered as a flex
sibling of the streak icon inside a width-constrained IconWrapper,
so it overflowed the wrapper and appeared on top of the streak
number.

Wrap the streak icon in a relative slot in compact mode and render
the WarningIcon as an absolute size-4 badge anchored at the streak
icon's bottom-left corner — mirroring how the profile-completion
dot sits on the avatar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@idoshamun idoshamun merged commit c85acfb into main May 28, 2026
12 checks passed
@idoshamun idoshamun deleted the claude/fix-profile-indicator-clipped branch May 28, 2026 11:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants