components/Dropdown.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 type DropdownProps = {
   options: Array<{ id: number; name: string }>;
@@ -20,12 +21,19 @@ export default function Dropdown({
   onToggle,
 }: DropdownProps) {
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(controlledIsOpen ?? false);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (!dropdownRef.current || !(event.target instanceof Node)) return;
+      if (!dropdownRef.current || !buttonRef.current || !(event.target instanceof Node)) return;
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (!dropdownRef.current.contains(event.target) && !buttonRef.current.contains(event.target)) {
         if (onToggle) onToggle(false);
         else setIsOpen(false);
       }
@@ -40,6 +48,17 @@ export default function Dropdown({
     };
   }, [controlledIsOpen, isOpen, onToggle]);
 
+  useEffect(() => {
+    if ((controlledIsOpen ?? isOpen) && buttonRef.current && mounted) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  }, [controlledIsOpen, isOpen, mounted]);
+
   const activeOption = options.find((option) => option.id === activeId) || null;
 
   const handleSelect = (option: { id: number }) => {
@@ -53,48 +72,65 @@ export default function Dropdown({
     else setIsOpen((prev) => !prev);
   };
 
-  return (
+  const dropdownMenu = (controlledIsOpen ?? isOpen) && mounted ? (
-    <div className="relative w-full" ref={dropdownRef} style={{ zIndex: 9999 }}>
+    <div 
-      <button
+      ref={dropdownRef}
-        type="button"
+      className="dropdown-menu"
-        onClick={toggleDropdown}
+      style={{
-        className="dropdown-button"
+        position: 'fixed',
-      >
+        top: dropdownPosition.top,
-        <span>
+        left: dropdownPosition.left,
-          {activeOption ? activeOption.name : label}
+        width: dropdownPosition.width,
-        </span>
+        zIndex: 999999
-        <svg
+      }}
-          className={`icon-sm transition-transform duration-200 ${(controlledIsOpen ?? isOpen) ? 'rotate-180' : ''}`}
+    >
-          fill="currentColor"
+      {options.length === 0 ? (
-          viewBox="0 0 20 20"
+        <div className="dropdown-item text-center">
-        >
+          No teams available
-          <path
-            fillRule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a 1 1 0 010-1.414z"
-            clipRule="evenodd"
-          />
-        </svg>
-      </button>
-
-      {(controlledIsOpen ?? isOpen) && (
-        <div className="absolute top-full left-0 w-full dropdown-menu" style={{ zIndex: 9999 }}>
-          {options.length === 0 ? (
-            <div className="dropdown-item text-center">
-              No teams available
-            </div>
-          ) : (
-            options.map((option) => (
-              <div
-                key={option.id}
-                onClick={() => handleSelect(option)}
-                className={`dropdown-item ${activeOption?.id === option.id ? 'active' : ''}`}
-              >
-                {option.name}
-              </div>
-            ))
-          )}
         </div>
+      ) : (
+        options.map((option) => (
+          <div
+            key={option.id}
+            onClick={() => handleSelect(option)}
+            className={`dropdown-item ${activeOption?.id === option.id ? 'active' : ''}`}
+          >
+            {option.name}
+          </div>
+        ))
       )}
     </div>
+  ) : null;
+
+  return (
+    <>
+      <div className="relative w-full">
+        <button
+          ref={buttonRef}
+          type="button"
+          onClick={toggleDropdown}
+          className="dropdown-button"
+        >
+          <span>
+            {activeOption ? activeOption.name : label}
+          </span>
+          <svg
+            className={`icon-sm transition-transform duration-200 ${(controlledIsOpen ?? isOpen) ? 'rotate-180' : ''}`}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a 1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      
+      {mounted && typeof document !== 'undefined' && dropdownMenu ? 
+        createPortal(dropdownMenu, document.body) : null
+      }
+    </>
   );
 }