fix(web): portal autocomplete overlays

apps/web/src/components/comments/CommentInput.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { createPortal } from "react-dom";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
+import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
 
 interface CommentInputProps {
   entityType: "estimate";
@@ -55,6 +57,13 @@ export function CommentInput({
           );
         }).slice(0, 8)
       : [];
+  const mentionOpen = mentionQuery !== null && filteredUsers.length > 0;
+  const { panelRef, position } = useAnchoredOverlay<HTMLTextAreaElement>({
+    open: mentionOpen,
+    onClose: () => setMentionQuery(null),
+    align: "start",
+    triggerRef: textareaRef,
+  });
 
   // Reset mention index when filtered list changes
   useEffect(() => {
@@ -177,33 +186,43 @@ export function CommentInput({
       />
 
       {/* Mention autocomplete dropdown */}
-      {mentionQuery !== null && filteredUsers.length > 0 && (
-        <div className="absolute left-0 bottom-full mb-1 z-50 w-72 rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-lg overflow-hidden">
-          {filteredUsers.map((user, idx) => (
-            <button
-              key={user.id}
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault(); // prevent textarea blur
-                insertMention(user);
+      {mentionOpen && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={panelRef}
+              className="fixed z-[9998] w-72 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
+              style={{
+                top: position.top,
+                left: position.left,
               }}
-              className={`flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors ${
-                idx === mentionIndex
-                  ? "bg-brand-50 dark:bg-sky-900/40 text-brand-700 dark:text-sky-200"
-                  : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
-              }`}
             >
-              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-brand-100 dark:bg-sky-800 text-xs font-semibold text-brand-700 dark:text-sky-200">
-                {(user.name ?? user.email).charAt(0).toUpperCase()}
-              </span>
-              <span className="truncate">
-                <span className="font-medium">{user.name ?? "—"}</span>
-                <span className="ml-1 text-gray-400 text-xs">{user.email}</span>
-              </span>
-            </button>
-          ))}
-        </div>
-      )}
+              {filteredUsers.map((user, idx) => (
+                <button
+                  key={user.id}
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    insertMention(user);
+                  }}
+                  className={`flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors ${
+                    idx === mentionIndex
+                      ? "bg-brand-50 dark:bg-sky-900/40 text-brand-700 dark:text-sky-200"
+                      : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+                  }`}
+                >
+                  <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-700 dark:bg-sky-800 dark:text-sky-200">
+                    {(user.name ?? user.email).charAt(0).toUpperCase()}
+                  </span>
+                  <span className="truncate">
+                    <span className="font-medium">{user.name ?? "—"}</span>
+                    <span className="ml-1 text-xs text-gray-400">{user.email}</span>
+                  </span>
+                </button>
+              ))}
+            </div>,
+            document.body,
+          )
+        : null}
 
       <div className="mt-2 flex items-center justify-between">
         <span className="text-xs text-gray-400">

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>
   );
 }