fix(client): anchor pending-approvals badge to the avatar so it doesn't clip in the header#1175
Conversation
…'t clip The count badge was absolutely positioned at the profile button's top-right corner (-top-1 -right-1). In the tight top header (py-1.5) inside an overflow-hidden main, that corner sits at the header's top edge, so the badge overflowed above it and was clipped (and floated far-right past the name). Anchor it to the avatar instead (relative wrapper) as a compact corner overlay: the avatar's top sits lower/more interior than the button corner, giving the badge headroom, and it now reads as a notification count on the profile picture. Also shrink it to fit the 20px avatar and fix an adjacent `runcate` -> `truncate` typo so long names ellipsize. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Coverage variation | ✅ -0.01% coverage variation (-1.00%) |
| Diff coverage | ✅ 75.00% diff coverage |
Coverage variation details
Coverable lines Covered lines Coverage Common ancestor commit (c0f9ae3) 15418 7586 49.20% Head commit (f94a301) 15420 (+2) 7585 (-1) 49.19% (-0.01%) Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch:
<coverage of head commit> - <coverage of common ancestor commit>
Diff coverage details
Coverable lines Covered lines Diff coverage Pull request (#1175) 8 6 75.00% Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified:
<covered lines added or modified>/<coverable lines added or modified> * 100%
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
There was a problem hiding this comment.
Pull request overview
Fixes the pending-approvals notification badge in the top header by anchoring it to the avatar (instead of the profile button corner) so it doesn’t overflow/clamp within the tight, overflow-hidden header layout.
Changes:
- Wrapes the avatar in a
relativeinline-flex container and absolutely positions the badge within that wrapper. - Shrinks/tightens the badge styling to fit the 20px avatar.
- Fixes a Tailwind class typo (
runcate→truncate) so long names ellipsize correctly.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <p-badge | ||
| [value]="pendingApprovalsCount().toString()" | ||
| severity="warn" | ||
| class="!absolute -top-1.5 -right-1.5 !flex !items-center !justify-center !h-[1.1rem] !min-w-[1.1rem] !p-0 !text-[0.65rem] !leading-none" |
The pending-approvals count badge was absolutely positioned at the profile button's top-right corner (
-top-1 -right-1). In the tight top header (py-1.5) inside anoverflow-hiddenmain, that corner is at the header's top edge, so the badge overflowed above it and was clipped (and floated far-right past the user's name).Fix: anchor the badge to the avatar (relative wrapper) as a compact corner overlay — the avatar's top is more interior, so the badge has headroom and reads as a notification count on the profile picture. Shrank it to fit the 20px avatar, and fixed an adjacent
runcate→truncatetypo so long names ellipsize.Verified:
ng build --configuration productionsucceeds, eslint clean. Best confirmed visually on staging (logged in with a pending approval).