refactor(select): enhance dropdown positioning and implement portal for improved rendering

services/frontend/src/components/primitives/select.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { Check, ChevronDown } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 
 export interface SelectOption {
@@ -10,6 +17,11 @@ export interface SelectOption {
   hint?: string;
 }
 
+/**
+ * Custom select whose dropdown is portalled to `document.body` so it
+ * never gets clipped by a parent `overflow-y-auto` or `overflow-hidden`.
+ * Position is computed via `getBoundingClientRect()` + fixed positioning.
+ */
 export function Select({
   value,
   onChange,
@@ -26,23 +38,67 @@ export function Select({
   size?: "sm" | "md";
 }) {
   const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number; width: number }>({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
 
+  // Measure trigger to position the portalled dropdown
+  const measure = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setPos({ top: rect.bottom + 6, left: rect.left, width: rect.width });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (open) measure();
+  }, [open, measure]);
+
+  // Reposition on scroll / resize while open
+  useEffect(() => {
+    if (!open) return;
+    const onReposition = () => measure();
+    window.addEventListener("scroll", onReposition, true);
+    window.addEventListener("resize", onReposition);
+    return () => {
+      window.removeEventListener("scroll", onReposition, true);
+      window.removeEventListener("resize", onReposition);
+    };
+  }, [open, measure]);
+
+  // Close on outside click (covers both trigger and dropdown)
   useEffect(() => {
     if (!open) return;
     const onDoc = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node))
+      const t = e.target as Node;
+      if (triggerRef.current?.contains(t) || dropdownRef.current?.contains(t))
+        return;
       setOpen(false);
     };
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
 
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
   const selected = options.find((o) => o.value === value);
 
   return (
-    <div ref={ref} className={cn("relative", className)}>
+    <>
+      <div className={cn("relative", className)}>
         <button
+          ref={triggerRef}
           type="button"
           onClick={() => setOpen((o) => !o)}
           className={cn(
@@ -61,11 +117,19 @@ export function Select({
             )}
           />
         </button>
+      </div>
 
-      {open && (
+      {open &&
+        createPortal(
           <div
-          className="glass absolute z-50 mt-1.5 max-h-72 w-full overflow-auto p-1.5"
+            ref={dropdownRef}
-          style={{ animation: "fade-up 0.14s ease" }}
+            className="glass fixed z-[9999] max-h-72 overflow-auto p-1.5"
+            style={{
+              top: pos.top,
+              left: pos.left,
+              width: pos.width,
+              animation: "fade-up 0.14s ease",
+            }}
           >
             {options.length === 0 && (
               <div className="px-3 py-2 text-xs text-ink-faint">No options</div>
@@ -94,8 +158,9 @@ export function Select({
                 {o.value === value && <Check className="size-3.5 shrink-0" />}
               </button>
             ))}
-        </div>
+          </div>,
+          document.body,
         )}
-    </div>
+    </>
   );
 }