fix: route tiles fill with fractional zoom (zoomSnap 0) so the route isn't tiny with wide margins; taller tiles (h-36)

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)
     }

frontend/src/pages/RoutesPage.jsx

@@ -268,7 +268,7 @@ export default function RoutesPage() {
               isSelected ? '' : 'bg-gray-900 border-gray-800 hover:border-gray-600'
             }`}>
             <RouteTileMap polyline={route.reference_polyline} sportType={route.sport_type}
-              className="w-full h-32 rounded-lg overflow-hidden" />
+              className="w-full h-36 rounded-lg overflow-hidden" />
             <p className="text-xs font-medium text-white mt-2 truncate">{route.name}</p>
             <div className="flex items-center justify-between mt-0.5 gap-1">
               <span className="text-xs text-gray-500">{formatDistance(route.distance_m, unit)}</span>