Fix user dropdown accessibility in mobile/tablet menu

- Prevent sidebar from closing when clicking user dropdown toggle
- Exclude user dropdown from auto-close behavior on navigation clicks
- Position user dropdown modal correctly on mobile/tablet screens
- Increase z-index to ensure dropdown appears above mobile overlay
- Center dropdown modal on mobile/tablet for better accessibility
- Add proper event handling to prevent unwanted closures

static/css/mobile-optimized.css

@@ -125,6 +125,25 @@
         visibility: visible;
     }
     
+    /* ===== User Dropdown for Mobile ===== */
+    .user-dropdown-modal {
+        z-index: 350 !important; /* Higher than sidebar */
+    }
+    
+    .sidebar.active .user-dropdown-modal.active,
+    .sidebar.mobile-open .user-dropdown-modal.active {
+        position: fixed !important;
+        top: 50% !important;
+        left: 50% !important;
+        right: auto !important;
+        transform: translate(-50%, -50%) !important;
+        max-width: 90%;
+        width: 280px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        border-radius: 12px;
+        background: white;
+    }
+    
     /* Mobile menu toggle button */
     .mobile-menu-toggle,
     .mobile-nav-toggle,

static/css/tablet-optimized.css

@@ -26,6 +26,23 @@
         transform: translateX(0);
     }
     
+    /* ===== User Dropdown for Tablets ===== */
+    .user-dropdown-modal {
+        z-index: 350 !important; /* Higher than sidebar */
+    }
+    
+    .sidebar.mobile-open .user-dropdown-modal.active {
+        position: fixed !important;
+        top: auto !important;
+        left: 50% !important;
+        right: auto !important;
+        transform: translateX(-50%);
+        max-width: 90%;
+        width: 300px;
+        margin-top: 100px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    }
+    
     /* Show mobile header for tablets */
     .mobile-header {
         display: flex !important;

static/js/sidebar.js

@@ -44,11 +44,16 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
-    // Close mobile sidebar when clicking on navigation links
+    // Close mobile sidebar when clicking on navigation links (but not user dropdown)
     if (sidebar) {
         const navLinks = sidebar.querySelectorAll('a');
         navLinks.forEach(link => {
-            link.addEventListener('click', function() {
+            link.addEventListener('click', function(e) {
+                // Don't close if clicking user dropdown toggle
+                if (link.id === 'user-dropdown-toggle' || link.closest('#user-dropdown-modal')) {
+                    return;
+                }
+                
                 if (window.innerWidth <= 1024) {
                     sidebar.classList.remove('mobile-open');
                     mobileOverlay.classList.remove('active');

static/js/user-dropdown.js

@@ -31,6 +31,10 @@ document.addEventListener('DOMContentLoaded', function() {
     // Close dropdown when clicking outside
     document.addEventListener('click', function(e) {
         if (userDropdownModal && !userDropdownModal.contains(e.target) && !userDropdownToggle.contains(e.target)) {
+            // Don't close if we're clicking on the mobile overlay
+            if (e.target.id === 'mobile-nav-overlay' || e.target.classList.contains('mobile-overlay')) {
+                return;
+            }
             userDropdownModal.classList.remove('active');
         }
     });