updates

frontEnd/public/styles/layout/_header.scss

@@ -141,13 +141,16 @@
     min-width: 280px !important;
     max-width: 320px;
     max-height: 500px;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 9999 !important;
     backdrop-filter: blur(25px) saturate(180%);
+    pointer-events: none;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
     
     // Custom scrollbar styles
     &::-webkit-scrollbar {
@@ -174,6 +177,19 @@
       visibility: visible !important;
       transform: translateX(-50%) translateY(0) scale(1) !important;
       display: block !important;
+      pointer-events: auto !important;
+    }
+    
+    // Bridge element to cover the gap
+    &::after {
+      content: "";
+      position: absolute;
+      top: -12px;
+      left: 0;
+      right: 0;
+      height: 12px;
+      pointer-events: auto;
+      z-index: -1;
     }
     
     &::before {
@@ -188,6 +204,7 @@
       border-right: 8px solid transparent;
       border-bottom: 8px solid #1a1a1a;
       filter: drop-shadow(0 -3px 8px rgba(0, 0, 0, 0.5));
+      pointer-events: none;
     }
     
     li {