fix(web): restore comment typing and portal combobox menus

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

@@ -1,7 +1,9 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useState, useRef, useMemo, useCallback, type ReactNode } from "react";
 import { useDebounce } from "~/hooks/useDebounce.js";
+import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
 
 interface EntityComboboxProps<T extends { id: string }> {
   value: string | null;
@@ -35,11 +37,22 @@ export function EntityCombobox<T extends { id: string }>({
   const debouncedSearch = useDebounce(search, 300);
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const closeDropdown = useCallback(() => {
+    setOpen(false);
+    setSearch("");
+  }, []);
 
   const { data: searchItems } = useSearchQuery(debouncedSearch, open);
   const items = searchItems ?? [];
 
   const { data: selectedItems } = useSelectedQuery(value, !!value && !open);
+  const { panelRef, position } = useAnchoredOverlay<HTMLDivElement>({
+    open,
+    onClose: closeDropdown,
+    align: "start",
+    matchTriggerWidth: true,
+    triggerRef: containerRef,
+  });
 
   const selectedLabel = useMemo(() => {
     if (!value) return "";
@@ -50,18 +63,6 @@ export function EntityCombobox<T extends { id: string }>({
     return value;
   }, [value, items, selectedItems, getLabel]);
 
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-        setSearch("");
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
   function handleFocus() {
     if (disabled) return;
     setOpen(true);
@@ -107,29 +108,42 @@ export function EntityCombobox<T extends { id: string }>({
       </div>
 
       {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
-          <ul className="max-h-52 overflow-y-auto py-1">
-            {items.length === 0 ? (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
-            ) : (
-              items.map((item) => (
-                <li key={item.id}>
-                  <button
-                    type="button"
-                    onMouseDown={() => select(item.id)}
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
-                      item.id === value
-                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
-                        : "text-gray-700 dark:text-gray-200"
-                    }`}
-                  >
-                    {renderItem ? renderItem(item, item.id === value) : getLabel(item)}
-                  </button>
-                </li>
-              ))
-            )}
-          </ul>
-        </div>
+        typeof document !== "undefined"
+          ? createPortal(
+              <div
+                ref={panelRef}
+                className="fixed z-[9998] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
+                style={{
+                  top: position.top,
+                  left: position.left,
+                  width: position.minWidth,
+                }}
+              >
+                <ul className="max-h-52 overflow-y-auto py-1">
+                  {items.length === 0 ? (
+                    <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
+                  ) : (
+                    items.map((item) => (
+                      <li key={item.id}>
+                        <button
+                          type="button"
+                          onMouseDown={() => select(item.id)}
+                          className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
+                            item.id === value
+                              ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
+                              : "text-gray-700 dark:text-gray-200"
+                          }`}
+                        >
+                          {renderItem ? renderItem(item, item.id === value) : getLabel(item)}
+                        </button>
+                      </li>
+                    ))
+                  )}
+                </ul>
+              </div>,
+              document.body,
+            )
+          : null
       )}
     </div>
   );