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