k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-06-20 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): prevent bottom nav from clipping scrollable content and dialogs

Browse Source 
- Add --bottom-nav-h CSS token (84px + safe-area on mobile, 0px on desktop)
  to give all fixes a single source of truth for the nav height
- Apply token to JourneySettingsDialog (fixes #650) and PlacesSidebar
  day-picker sheet so bottom-anchored sheets clear the nav bar
- Add paddingBottom to TripPlannerPage Bookings, Lists, and Budget tab
  scroll containers so content can be scrolled past the nav
- Bump Modal z-index from z-50 to z-[200] so modals render above the
  bottom nav (both share z-50 with nav winning by DOM order)
This commit is contained in:
jubnl
2026-04-15 02:16:21 +02:00
parent a3f368d547
commit 0104ecfee8
5 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/index.css
+5
View File
@@ -141,6 +141,7 @@ html.dark .bg-slate-50\/60, html.dark [class*="bg-slate-50/"] { background-color
:root {
--safe-top: env(safe-area-inset-top, 0px);
--nav-h: 0px;
--bottom-nav-h: 0px;
--font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
--sp-1: 4px;
--sp-2: 8px;
@@ -193,6 +194,10 @@ html.dark .bg-slate-50\/60, html.dark [class*="bg-slate-50/"] { background-color
--mood-rough: #9B8EC4;
}
@media (max-width: 767px) {
:root { --bottom-nav-h: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
:root { --nav-h: calc(56px + env(safe-area-inset-top, 0px)); }
}