fix(web): portal skill tag suggestions

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

@@ -1,7 +1,9 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useCallback, useRef, useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
+import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
 
 interface SkillTagInputProps {
   value: string[];
@@ -16,6 +18,10 @@ export function SkillTagInput({ value, onChange, placeholder = "Add skill…", c
   const [activeIdx, setActiveIdx] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const closeSuggestions = useCallback(() => {
+    setOpen(false);
+    setActiveIdx(-1);
+  }, []);
 
   const { data: analytics } = trpc.resource.getSkillsAnalytics.useQuery(undefined, {
     staleTime: 120_000,
@@ -26,6 +32,14 @@ export function SkillTagInput({ value, onChange, placeholder = "Add skill…", c
     .map((a) => a.skill)
     .filter((s) => !value.includes(s) && s.toLowerCase().includes(input.toLowerCase()))
     .slice(0, 8);
+  const dropdownOpen = open && suggestions.length > 0;
+  const { panelRef, position } = useAnchoredOverlay<HTMLDivElement>({
+    open: dropdownOpen,
+    onClose: closeSuggestions,
+    align: "start",
+    matchTriggerWidth: true,
+    triggerRef: containerRef,
+  });
 
   function addSkill(skill: string) {
     const trimmed = skill.trim();
@@ -57,25 +71,12 @@ export function SkillTagInput({ value, onChange, placeholder = "Add skill…", c
       e.preventDefault();
       setActiveIdx((i) => Math.max(i - 1, -1));
     } else if (e.key === "Escape") {
-      setOpen(false);
-      setActiveIdx(-1);
+      closeSuggestions();
     } else if (e.key === "Backspace" && input === "" && value.length > 0) {
       onChange(value.slice(0, -1));
     }
   }
 
-  // Close on outside click
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
   return (
     <div ref={containerRef} className={`relative ${className ?? ""}`}>
       {/* Tags + input row */}
@@ -112,28 +113,39 @@ export function SkillTagInput({ value, onChange, placeholder = "Add skill…", c
       </div>
 
       {/* Dropdown */}
-      {open && suggestions.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-48 overflow-y-auto"
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          {suggestions.map((skill, idx) => (
-            <li key={skill}>
-              <button
-                type="button"
-                onMouseDown={(e) => { e.preventDefault(); addSkill(skill); }}
-                className={`w-full text-left px-3 py-2 text-sm 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"
-                }`}
-              >
-                {skill}
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
+      {dropdownOpen && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={panelRef}
+              className="fixed z-[9998] max-h-48 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800"
+              style={{
+                top: position.top,
+                left: position.left,
+                width: position.minWidth,
+              }}
+              onMouseDown={(e) => e.preventDefault()}
+            >
+              <ul>
+                {suggestions.map((skill, idx) => (
+                  <li key={skill}>
+                    <button
+                      type="button"
+                      onMouseDown={(e) => { e.preventDefault(); addSkill(skill); }}
+                      className={`w-full text-left px-3 py-2 text-sm 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"
+                      }`}
+                    >
+                      {skill}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>,
+            document.body,
+          )
+        : null}
     </div>
   );
 }