Fix sidebar dropdown positioning with fixed positioning to prevent overflow clipping and ensure proper menu display outside collapsed panels

frontend/app.js

@@ -169,6 +169,7 @@
       const options = dropdown.querySelectorAll('.custom-dropdown-option');
       const hiddenInput = dropdown.querySelector('input[type="hidden"]');
       const selectedText = dropdown.querySelector('.custom-dropdown-selected');
+      const menu = dropdown.querySelector('.custom-dropdown-menu');
 
       if (!trigger) return;
 
@@ -184,6 +185,13 @@
         
         dropdown.classList.toggle('open', !isOpen);
         trigger.setAttribute('aria-expanded', !isOpen);
+
+        // Position fixed menu for sidebar dropdowns
+        if (!isOpen && dropdown.classList.contains('sidebar-dropdown') && menu) {
+          const rect = trigger.getBoundingClientRect();
+          menu.style.top = `${rect.bottom + 4}px`;
+          menu.style.left = `${rect.left}px`;
+        }
       });
 
       // Handle option selection

frontend/style.css

@@ -424,6 +424,15 @@ select {
 /* Sidebar dropdown specific */
 .sidebar-dropdown {
   padding: 0 16px 12px;
+  position: relative;
+}
+
+.sidebar-dropdown .custom-dropdown-menu {
+  position: fixed;
+  z-index: 10000;
+  left: auto;
+  right: auto;
+  width: 248px;
 }
 
 .sidebar-dropdown .custom-dropdown-trigger {
@@ -481,6 +490,7 @@ select {
   flex: 1 1 auto;
   min-height: 0;
   max-height: none;
+  height: auto;
   padding-top: 0;
 }