jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix user dropdown accessibility in mobile/tablet menu

Browse Source 
- 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
This commit is contained in:
Jens Luedicke
2025-07-14 10:32:28 +02:00
committed by Jens Luedicke
parent 6dfdc58afc
commit 7a5e271395
4 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/css/mobile-optimized.css
View File

@@ -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,

17
static/css/tablet-optimized.css
View File

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