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' }`}> + className="w-full h-36 rounded-lg overflow-hidden" />

{route.name}

{formatDistance(route.distance_m, unit)}