update

frontend/src/components/ui/select.jsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
 import { ChevronDown } from "lucide-react"
 
@@ -7,7 +8,11 @@ const SelectContext = React.createContext(null)
 const Select = ({ value, onValueChange, children, ...props }) => {
   const [isOpen, setIsOpen] = React.useState(false)
   const [internalValue, setInternalValue] = React.useState("")
+  const [menuPos, setMenuPos] = React.useState({ top: 0, left: 0, width: 0 })
+  const triggerRef = React.useRef(null)
+  const menuRef = React.useRef(null)
   const currentValue = value !== undefined ? value : internalValue
+
   const handleValueChange = (newValue) => {
     if (onValueChange) {
       onValueChange(newValue)
@@ -17,8 +22,51 @@ const Select = ({ value, onValueChange, children, ...props }) => {
     setIsOpen(false)
   }
 
+  React.useLayoutEffect(() => {
+    if (!isOpen || !triggerRef.current) return
+    const r = triggerRef.current.getBoundingClientRect()
+    setMenuPos({ top: r.bottom + 4, left: r.left, width: r.width })
+  }, [isOpen])
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    const reposition = () => {
+      if (!triggerRef.current) return
+      const r = triggerRef.current.getBoundingClientRect()
+      setMenuPos({ top: r.bottom + 4, left: r.left, width: r.width })
+    }
+    window.addEventListener("scroll", reposition, true)
+    window.addEventListener("resize", reposition)
+    return () => {
+      window.removeEventListener("scroll", reposition, true)
+      window.removeEventListener("resize", reposition)
+    }
+  }, [isOpen])
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    const onPointerDown = (e) => {
+      const t = triggerRef.current
+      const m = menuRef.current
+      if (t?.contains(e.target) || m?.contains(e.target)) return
+      setIsOpen(false)
+    }
+    document.addEventListener("pointerdown", onPointerDown)
+    return () => document.removeEventListener("pointerdown", onPointerDown)
+  }, [isOpen])
+
   return (
-    <SelectContext.Provider value={{ value: currentValue, onValueChange: handleValueChange, isOpen, setIsOpen }}>
+    <SelectContext.Provider
+      value={{
+        value: currentValue,
+        onValueChange: handleValueChange,
+        isOpen,
+        setIsOpen,
+        triggerRef,
+        menuRef,
+        menuPos,
+      }}
+    >
       <div className="relative" {...props}>
         {children}
       </div>
@@ -28,9 +76,14 @@ const Select = ({ value, onValueChange, children, ...props }) => {
 
 const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
   const context = React.useContext(SelectContext)
+  const setRefs = (node) => {
+    if (context?.triggerRef) context.triggerRef.current = node
+    if (typeof ref === "function") ref(node)
+    else if (ref) ref.current = node
+  }
   return (
     <button
-      ref={ref}
+      ref={setRefs}
       type="button"
       onClick={() => context?.setIsOpen(!context.isOpen)}
       className={cn(
@@ -54,19 +107,43 @@ const SelectValue = ({ placeholder, ...props }) => {
 
 const SelectContent = React.forwardRef(({ className, children, ...props }, ref) => {
   const context = React.useContext(SelectContext)
-  if (!context?.isOpen) return null
+  const [mounted, setMounted] = React.useState(false)
 
-  return (
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!context?.isOpen || !mounted) return null
+
+  const { top, left, width } = context.menuPos
+  const style = {
+    position: "fixed",
+    top,
+    left,
+    minWidth: width > 0 ? width : undefined,
+    zIndex: 10050,
+  }
+
+  const setRefs = (node) => {
+    if (context?.menuRef) context.menuRef.current = node
+    if (typeof ref === "function") ref(node)
+    else if (ref) ref.current = node
+  }
+
+  return createPortal(
     <div
-      ref={ref}
+      ref={setRefs}
+      style={style}
       className={cn(
-        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-slate-950 shadow-md",
+        "rounded-md border border-slate-200 bg-white text-slate-950 shadow-lg",
+        "max-h-[min(70vh,22rem)] overflow-y-auto overflow-x-hidden",
         className
       )}
       {...props}
     >
       <div className="p-1">{children}</div>
-    </div>
+    </div>,
+    document.body
   )
 })
 SelectContent.displayName = "SelectContent"

frontend/src/pages/Deals.jsx

@@ -147,7 +147,7 @@ export default function Deals() {
                     </div>
                 </div>
 
-                <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden">
+                <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-visible">
                     <button
                         type="button"
                         onClick={() => setSectionOpen(!sectionOpen)}

frontend/src/pages/Leads.jsx

@@ -307,7 +307,7 @@ export default function Leads() {
                     </div>
                 </div>
 
-                <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden">
+                <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-visible">
                     <button
                         type="button"
                         onClick={() => setSectionOpen(!sectionOpen)}