From bb9c0c9b686a4adc30139beb121f7856798bf7cd Mon Sep 17 00:00:00 2001 From: Salman Abuhaimed Date: Tue, 31 Mar 2026 05:44:59 +0300 Subject: [PATCH] fix: day details on mobile not showing --- client/src/pages/TripPlannerPage.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx index 7636a86..5e48167 100644 --- a/client/src/pages/TripPlannerPage.tsx +++ b/client/src/pages/TripPlannerPage.tsx @@ -98,6 +98,14 @@ export default function TripPlannerPage(): React.ReactElement | null { const [mobileSidebarOpen, setMobileSidebarOpen] = useState<'left' | 'right' | null>(null) const [deletePlaceId, setDeletePlaceId] = useState(null) + const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768) + useEffect(() => { + const mq = window.matchMedia('(max-width: 767px)') + const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches) + mq.addEventListener('change', handler) + return () => mq.removeEventListener('change', handler) + }, []) + // Load trip + files (needed for place inspector file section) useEffect(() => { if (tripId) { @@ -544,8 +552,8 @@ export default function TripPlannerPage(): React.ReactElement | null { lng={geoPlace?.lng} onClose={() => setShowDayDetail(null)} onAccommodationChange={loadAccommodations} - leftWidth={leftCollapsed ? 0 : leftWidth} - rightWidth={rightCollapsed ? 0 : rightWidth} + leftWidth={isMobile ? 0 : (leftCollapsed ? 0 : leftWidth)} + rightWidth={isMobile ? 0 : (rightCollapsed ? 0 : rightWidth)} /> ) })()}