From 882c71f2ba30f799f3e471492f9247fd798f3870 Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Sun, 20 Jul 2025 01:55:22 -0400
Subject: [PATCH] Revert dropdown to simpler positioning approach
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simplified dropdown positioning to fix layering issues:
- Reverted to absolute positioning with inline z-index styles
- Added explicit z-index to dropdown container in streams page
- Removed complex fixed positioning logic that was causing problems

This should resolve dropdown visibility issues while maintaining proper positioning.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/streams/page.tsx    |  2 +-
 components/Dropdown.tsx | 71 +++++++++++++----------------------------
 2 files changed, 24 insertions(+), 49 deletions(-)

diff --git a/app/streams/page.tsx b/app/streams/page.tsx
index e92feeb..fd72bea 100644
--- a/app/streams/page.tsx
+++ b/app/streams/page.tsx
@@ -235,7 +235,7 @@ export default function AddStream() {
               Team
             </label>
             <div className="form-row">
-              <div style={{ flex: 1 }}>
+              <div style={{ flex: 1, position: 'relative', zIndex: 10000 }}>
                 <Dropdown
                   options={teams}
                   activeId={formData.team_id}
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index 9588551..a3bcc7f 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -20,15 +20,12 @@ 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) && 
-          buttonRef.current && !buttonRef.current.contains(event.target)) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (onToggle) onToggle(false);
         else setIsOpen(false);
       }
@@ -43,17 +40,6 @@ 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 }) => {
@@ -68,41 +54,30 @@ export default function Dropdown({
   };
 
   return (
-    <>
-      <div className="relative w-full">
-        <button
-          ref={buttonRef}
-          type="button"
-          onClick={toggleDropdown}
-          className="dropdown-button"
+    <div className="relative w-full" ref={dropdownRef} style={{ zIndex: 9999 }}>
+      <button
+        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"
         >
-          <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>
+          <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 
-          ref={dropdownRef}
-          className="fixed z-[9999] dropdown-menu"
-          style={{
-            top: dropdownPosition.top,
-            left: dropdownPosition.left,
-            width: dropdownPosition.width
-          }}
-        >
+        <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
@@ -120,6 +95,6 @@ export default function Dropdown({
           )}
         </div>
       )}
-    </>
+    </div>
   );
 }
\ No newline at end of file