From f94a301ff1907b952806f74420643d5db764589c Mon Sep 17 00:00:00 2001 From: Stephan Krusche Date: Fri, 3 Jul 2026 11:33:57 +0200 Subject: [PATCH] fix(client): anchor pending-approvals badge to the avatar so it doesn'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) --- .../profile-nav-section.component.html | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/client/src/app/components/profile-nav-section/profile-nav-section.component.html b/client/src/app/components/profile-nav-section/profile-nav-section.component.html index 5abf60608..68db582b4 100644 --- a/client/src/app/components/profile-nav-section/profile-nav-section.component.html +++ b/client/src/app/components/profile-nav-section/profile-nav-section.component.html @@ -1,11 +1,17 @@
@if (isLoggedIn()) { - - - - @if (pendingApprovalsCount() > 0) { - - } + + + + @if (pendingApprovalsCount() > 0) { + + } + + } @else {