From f34f5ad7080b802428aba9c56e55adf76fc5ae57 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sun, 22 Mar 2026 10:17:22 -0400
Subject: [PATCH] Fix sidebar dropdown positioning with fixed positioning to
 prevent overflow clipping and ensure proper menu display outside collapsed
 panels

---
 frontend/app.js    |  8 ++++++++
 frontend/style.css | 10 ++++++++++
 2 files changed, 18 insertions(+)

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;
 }