components/Dropdown.tsx

@@ -20,12 +20,15 @@ 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 });
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (!dropdownRef.current || !(event.target instanceof Node)) return;
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && 
+          buttonRef.current && !buttonRef.current.contains(event.target)) {
         if (onToggle) onToggle(false);
         else setIsOpen(false);
       }
@@ -40,6 +43,17 @@ export default function Dropdown({
     };
   }, [controlledIsOpen, isOpen, onToggle]);
 
+  useEffect(() => {
+    if ((controlledIsOpen ?? isOpen) && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  }, [controlledIsOpen, isOpen]);
+
   const activeOption = options.find((option) => option.id === activeId) || null;
 
   const handleSelect = (option: { id: number }) => {
@@ -54,8 +68,10 @@ export default function Dropdown({
   };
 
   return (
-    <div className="relative w-full" ref={dropdownRef}>
+    <>
+      <div className="relative w-full">
         <button
+          ref={buttonRef}
           type="button"
           onClick={toggleDropdown}
           className="dropdown-button"
@@ -75,12 +91,21 @@ export default function Dropdown({
             />
           </svg>
         </button>
+      </div>
 
       {(controlledIsOpen ?? isOpen) && (
-        <div className="absolute z-[9999] w-full dropdown-menu">
+        <div 
+          ref={dropdownRef}
+          className="fixed z-[9999] dropdown-menu"
+          style={{
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+            width: dropdownPosition.width
+          }}
+        >
           {options.length === 0 ? (
             <div className="dropdown-item text-center">
-              No streams available
+              No teams available
             </div>
           ) : (
             options.map((option) => (
@@ -95,6 +120,6 @@ export default function Dropdown({
           )}
         </div>
       )}
-    </div>
+    </>
   );
 }