Goutam/lynkeduppro-crm
2
1
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(dashboard): topbar dropdowns no longer sit under module chrome

Browse Source 
The Offline-notifications popup was covered by Smart Gallery's toolbar. Raising
its z-index could not have worked: .dash-topbar is `position: sticky; z-index: 20`,
which opens a stacking context, so .tm-menu-pop's z-index: 30 only ranked inside
the topbar. Against module content the whole topbar competed at 20 — and the
vendored photo-gallery SDK stacks up to 1400 (its own README documents this).

Adds AnchoredPopover, which portals to <body> — out of the topbar's stacking
context entirely — positions from the trigger's viewport rect, clamps to the
window edges, and closes on scroll/resize/Escape/outside-click. Applied to the
notification bell AND the user menu, which had the identical trap and would have
been reported next.

Portalling rather than z-index escalation is the fix that survives a module
raising its own z-index later.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Maaz Ahamed
2026-07-28 19:22:08 +05:30
parent 9a619e0be9
commit ab78c739e0
3 changed files with 95 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/topbar.tsx
+9 -10
View File
@@ -1,11 +1,12 @@
"use client";
import { useState } from "react";
import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Sun, Moon, ChevronDown, LogOut } from "lucide-react";
import { useAuth } from "@abe-kap/appshell-sdk/react";
import { GlobalSearch } from "./global-search";
import { NotificationBell } from "./notification-bell";
import { AnchoredPopover } from "./anchored-popover";
import { user } from "./account-data";
function initialsOf(name: string): string {
@@ -18,6 +19,7 @@ export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme
const router = useRouter();
const { user: me, logout, context } = useAuth();
const [menuOpen, setMenuOpen] = useState(false);
const userBtnRef = useRef<HTMLButtonElement>(null);
const roleLabel = context?.scope?.role ? context.scope.role.charAt(0).toUpperCase() + context.scope.role.slice(1) : "";
const name = me?.displayName || user.name;
const initials = me ? initialsOf(me.displayName) : user.initials;
@@ -42,7 +44,7 @@ export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme
</button>
<NotificationBell />
<div className="top-user-wrap" style={{ position: "relative" }}>
<button className="top-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
<button ref={userBtnRef} className="top-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
<span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
<div style={{ textAlign: "left", minWidth: 0 }}>
<div className="nm">{name}</div>
@@ -50,14 +52,11 @@ export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme
</div>
<ChevronDown size={16} />
</button>
{menuOpen && (
<>
<div className="tm-menu-scrim" onClick={() => setMenuOpen(false)} />
<div className="tm-menu-pop" role="menu">
<button className="danger" onClick={signOut}><LogOut size={15} /> Sign out</button>
</div>
</>
)}
{/* Portalled for the same reason as the bell: the sticky topbar traps any in-place
dropdown below module chrome (the gallery SDK stacks up to 1400). */}
<AnchoredPopover anchorRef={userBtnRef} open={menuOpen} onClose={() => setMenuOpen(false)} width={190}>
<button className="danger" onClick={signOut}><LogOut size={15} /> Sign out</button>
</AnchoredPopover>
</div>
</div>
</header>