diff --git a/frontend/app.js b/frontend/app.js index 8cebaa3..26044bf 100644 --- a/frontend/app.js +++ b/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 diff --git a/frontend/style.css b/frontend/style.css index b0ec2ab..19874fa 100644 --- a/frontend/style.css +++ b/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; }