fix(web): portal autocomplete overlays

apps/web/src/components/ui/AutocompleteInput.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
 
 export interface AutocompleteOption {
   id: string;
@@ -36,6 +38,17 @@ export function AutocompleteInput({ options, value, onChange, placeholder = "Sea
   const [activeIdx, setActiveIdx] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const closeDropdown = useCallback(() => {
+    setOpen(false);
+    setInput(selected?.label ?? "");
+  }, [selected?.label]);
+  const { panelRef, position } = useAnchoredOverlay<HTMLDivElement>({
+    open,
+    onClose: closeDropdown,
+    align: "start",
+    matchTriggerWidth: true,
+    triggerRef: containerRef,
+  });
 
   // Keep input text in sync when selected value changes externally
   useEffect(() => {
@@ -80,19 +93,6 @@ export function AutocompleteInput({ options, value, onChange, placeholder = "Sea
     }
   }
 
-  // Close on outside click
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-        setInput(selected?.label ?? "");
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open, selected?.label]);
-
   return (
     <div ref={containerRef} className={`relative ${className ?? ""}`}>
       <div className="relative">
@@ -124,29 +124,40 @@ export function AutocompleteInput({ options, value, onChange, placeholder = "Sea
         )}
       </div>
 
-      {open && filtered.length > 0 && (
-        <ul
-          className="absolute z-50 left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden max-h-56 overflow-y-auto"
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          {filtered.map((opt, idx) => (
-            <li key={opt.id}>
-              <button
-                type="button"
-                onMouseDown={(e) => { e.preventDefault(); select(opt); }}
-                className={`w-full text-left px-3 py-2 text-sm flex items-baseline gap-2 transition-colors ${
-                  idx === activeIdx
-                    ? "bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300"
-                    : "text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
-                }`}
-              >
-                <span className="truncate">{opt.label}</span>
-                {opt.sub && <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0">{opt.sub}</span>}
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
+      {open && filtered.length > 0 && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={panelRef}
+              className="fixed z-[9998] max-h-56 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+              style={{
+                top: position.top,
+                left: position.left,
+                width: position.minWidth,
+              }}
+              onMouseDown={(e) => e.preventDefault()}
+            >
+              <ul>
+                {filtered.map((opt, idx) => (
+                  <li key={opt.id}>
+                    <button
+                      type="button"
+                      onMouseDown={(e) => { e.preventDefault(); select(opt); }}
+                      className={`flex w-full items-baseline gap-2 px-3 py-2 text-left text-sm transition-colors ${
+                        idx === activeIdx
+                          ? "bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300"
+                          : "text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-700"
+                      }`}
+                    >
+                      <span className="truncate">{opt.label}</span>
+                      {opt.sub && <span className="shrink-0 text-xs text-gray-400 dark:text-gray-500">{opt.sub}</span>}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>,
+            document.body,
+          )
+        : null}
     </div>
   );
 }