fix(web): portal remaining overlay menus

apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { createPortal } from "react-dom";
 import { useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } from "react";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
@@ -8,6 +9,7 @@ import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
 import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
 import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
 import { useReferenceData } from "~/hooks/useReferenceData.js";
+import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
 
 function UtilizationBar({ percent }: { percent: number }) {
   const barColor =
@@ -119,23 +121,18 @@ function ChargeabilityContextLine({ row }: { row: ChargeabilityRow }) {
 
 function FilterDropdown({ label, children }: { label: string; children: ReactNode }) {
   const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    function handlePointerDown(event: MouseEvent) {
-      const target = event.target as Node;
-      if (dropdownRef.current && !dropdownRef.current.contains(target)) {
-        setIsOpen(false);
-      }
-    }
-
-    document.addEventListener("mousedown", handlePointerDown);
-    return () => document.removeEventListener("mousedown", handlePointerDown);
-  }, []);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const { panelRef, position } = useAnchoredOverlay<HTMLButtonElement>({
+    open: isOpen,
+    onClose: () => setIsOpen(false),
+    align: "end",
+    triggerRef,
+  });
 
   return (
-    <div ref={dropdownRef} className="relative">
+    <div className="relative">
       <button
+        ref={triggerRef}
         type="button"
         onClick={() => setIsOpen((current) => !current)}
         className="inline-flex min-w-44 items-center justify-between gap-3 rounded-xl border border-gray-300 bg-white px-3 py-2 text-xs text-gray-700 shadow-sm transition hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
@@ -143,11 +140,21 @@ function FilterDropdown({ label, children }: { label: string; children: ReactNod
         <span className="truncate">{label}</span>
         <span className="text-[10px] text-gray-400">{isOpen ? "▲" : "▼"}</span>
       </button>
-      {isOpen ? (
-        <div className="absolute right-0 z-20 mt-2 w-72 rounded-2xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-900">
-          {children}
-        </div>
-      ) : null}
+      {isOpen && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={panelRef}
+              className="fixed z-[9998] w-72 rounded-2xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-900"
+              style={{
+                top: position.top,
+                left: position.left,
+              }}
+            >
+              {children}
+            </div>,
+            document.body,
+          )
+        : null}
     </div>
   );
 }