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">