mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 21:31:46 +00:00
fix(mobile): prevent bottom nav from clipping scrollable content and dialogs
- 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:
@@ -50,7 +50,7 @@ export default function Modal({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-start sm:items-center justify-center px-4 modal-backdrop"
|
||||
className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop"
|
||||
style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 20, overflow: 'hidden' }}
|
||||
onMouseDown={e => { mouseDownTarget.current = e.target }}
|
||||
onClick={e => {
|
||||
|
||||
Reference in New Issue
Block a user