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

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>
2026-07-28 19:22:08 +05:30
parent 9a619e0be9
commit ab78c739e0
3 changed files with 95 additions and 17 deletions
@@ -4,13 +4,15 @@
 // for this browser. The dot is lit when this browser is subscribed. Hidden entirely when push isn't
 // available (demo mode, or a browser without ServiceWorker/PushManager).

-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Icon } from "./ui";
+import { AnchoredPopover } from "./anchored-popover";
 import { usePushNotifications } from "@/lib/push-notifications";

 export function NotificationBell() {
  const push = usePushNotifications();
  const [open, setOpen] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);

  if (!push.supported) return null;

@@ -19,6 +21,7 @@ export function NotificationBell() {
  return (
    <div style={{ position: "relative" }}>
      <button
+        ref={btnRef}
        className="ic-btn"
        aria-label="Notifications"
        aria-haspopup="menu"
@@ -40,10 +43,8 @@ export function NotificationBell() {
          }}
        />
      </button>
-      {open && (
-        <>
-          <div className="tm-menu-scrim" onClick={() => setOpen(false)} />
-          <div className="tm-menu-pop" role="menu" style={{ width: 260, padding: 14 }}>
+      <AnchoredPopover anchorRef={btnRef} open={open} onClose={() => setOpen(false)} width={260}>
+          <div style={{ padding: 14 }}>
            <div style={{ fontWeight: 700, fontSize: 13, marginBottom: 4 }}>Offline notifications</div>
            <p style={{ fontSize: 12, color: "var(--muted)", margin: "0 0 12px", lineHeight: 1.4 }}>
              {push.subscribed
@@ -67,8 +68,7 @@ export function NotificationBell() {

            {push.error && <p style={{ fontSize: 11.5, color: "var(--danger, #c0392b)", margin: "10px 0 0" }}>{push.error}</p>}
          </div>
-        </>
-      )}
+      </AnchoredPopover>
    </div>
  );
 }