From 72a9798743567d70daeae8cf8a21acb5a46fae94 Mon Sep 17 00:00:00 2001 From: Pbhacks Date: Sun, 8 Mar 2026 18:40:25 +0530 Subject: [PATCH 1/2] fix: increase fitBounds padding to keep route markers inside viewport Fixes #265 The fitBounds padding was only 50px, which was insufficient for the 45px-tall pin markers, causing end-of-route markers to fall halfway off the screen. Increased padding to 80px on all sides (and 450px when side panels are open) to ensure markers remain fully visible. --- src/components/map/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 76b544be..f209c479 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -446,10 +446,10 @@ export const MapComponent = () => { const dpOpen = state.directionsPanelOpen; const spOpen = state.settingsPanelOpen; - const paddingTopLeft = [screen.width < 550 ? 50 : dpOpen ? 420 : 50, 50]; + const paddingTopLeft = [screen.width < 550 ? 80 : dpOpen ? 450 : 80, 80]; const paddingBottomRight = [ - screen.width < 550 ? 50 : spOpen ? 420 : 50, - 50, + screen.width < 550 ? 80 : spOpen ? 450 : 80, + 80, ]; mapRef.current.fitBounds(bounds, { From a18884dab1119d544c7bca75d28d84ac2d48afa3 Mon Sep 17 00:00:00 2001 From: Pbhacks Date: Sun, 8 Mar 2026 21:14:51 +0530 Subject: [PATCH 2/2] fix: use window.innerWidth instead of screen.width for responsive padding Addresses Copilot review feedback on PR #360. screen.width reflects the physical device screen, not the browser viewport, so it doesn't respond to window resizes or split-screen. Using window.innerWidth ensures padding matches the actual viewport. --- src/components/map/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index f209c479..fbf9bd90 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -446,9 +446,12 @@ export const MapComponent = () => { const dpOpen = state.directionsPanelOpen; const spOpen = state.settingsPanelOpen; - const paddingTopLeft = [screen.width < 550 ? 80 : dpOpen ? 450 : 80, 80]; + const paddingTopLeft = [ + window.innerWidth < 550 ? 80 : dpOpen ? 450 : 80, + 80, + ]; const paddingBottomRight = [ - screen.width < 550 ? 80 : spOpen ? 450 : 80, + window.innerWidth < 550 ? 80 : spOpen ? 450 : 80, 80, ];