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);
+      closeSuggestions();
-      setActiveIdx(-1);
     } 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,11 +113,19 @@ export function SkillTagInput({ value, onChange, placeholder = "Add skill…", c
       </div>
 
       {/* Dropdown */}
-      {open && suggestions.length > 0 && (
+      {dropdownOpen && typeof document !== "undefined"
-        <ul
+        ? createPortal(
-          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"
+            <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
@@ -133,7 +142,10 @@ export function SkillTagInput({ value, onChange, placeholder = "Add skill…", c
                   </li>
                 ))}
               </ul>
-      )}
+            </div>,
+            document.body,
+          )
+        : null}
     </div>
   );
 }