diff --git a/frontend/src/components/ui/RouteTileMap.jsx b/frontend/src/components/ui/RouteTileMap.jsx
index 8baa15f..417d687 100644
--- a/frontend/src/components/ui/RouteTileMap.jsx
+++ b/frontend/src/components/ui/RouteTileMap.jsx
@@ -33,6 +33,9 @@ export default function RouteTileMap({ polyline, sportType, className = '' }) {
zoomControl: false, attributionControl: false, dragging: false,
scrollWheelZoom: false, doubleClickZoom: false, boxZoom: false,
keyboard: false, touchZoom: false, tap: false, preferCanvas: true,
+ // Allow fractional zoom so fitBounds fills the tile tightly instead of
+ // snapping to an integer zoom that leaves wide empty margins.
+ zoomSnap: 0,
})
mapRef.current = map
L.tileLayer(TILE_URL, { maxZoom: 19 }).addTo(map)
@@ -47,7 +50,7 @@ export default function RouteTileMap({ polyline, sportType, className = '' }) {
if (coords.length >= 2) {
L.polyline(coords, { color: sportColor(sportType), weight: 3, opacity: 0.95 }).addTo(map)
map.invalidateSize()
- map.fitBounds(L.latLngBounds(coords), { padding: [12, 12] })
+ map.fitBounds(L.latLngBounds(coords), { padding: [6, 6] })
} else {
map.setView([0, 0], 1)
}
diff --git a/frontend/src/pages/RoutesPage.jsx b/frontend/src/pages/RoutesPage.jsx
index fe0bc8a..dfc5917 100644
--- a/frontend/src/pages/RoutesPage.jsx
+++ b/frontend/src/pages/RoutesPage.jsx
@@ -268,7 +268,7 @@ export default function RoutesPage() {
isSelected ? '' : 'bg-gray-900 border-gray-800 hover:border-gray-600'
}`}>
{route.name}