feat: taller route tiles (h-46), labels overlay above route line for more place names, renamed auto routes become custom (rename clears auto_detected + startup backfill)

frontend/src/components/ui/RouteTileMap.jsx

@@ -2,8 +2,11 @@ import { useEffect, useRef } from 'react'
 import L from 'leaflet'
 import { sportColor } from '../../utils/format'
 
-// Voyager raster tiles — same street style used on the activity map.
-const TILE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
+// Voyager raster tiles — same street style used on the activity map. We split
+// the basemap (no labels) from a labels-only overlay so place names can be drawn
+// *above* the route line instead of being hidden underneath it.
+const BASE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png'
+const LABELS_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}{r}.png'
 
 function decodePolyline(encoded) {
   if (!encoded) return []
@@ -38,7 +41,12 @@ export default function RouteTileMap({ polyline, sportType, className = '' }) {
       zoomSnap: 0,
     })
     mapRef.current = map
-    L.tileLayer(TILE_URL, { maxZoom: 19 }).addTo(map)
+    L.tileLayer(BASE_URL, { maxZoom: 19 }).addTo(map)
+    // A dedicated high-z pane keeps the labels overlay on top of the route line.
+    map.createPane('labels')
+    map.getPane('labels').style.zIndex = 650
+    map.getPane('labels').style.pointerEvents = 'none'
+    L.tileLayer(LABELS_URL, { maxZoom: 19, pane: 'labels' }).addTo(map)
     return () => { map.remove(); mapRef.current = null }
   }, [])
 

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-36 rounded-lg overflow-hidden" />
+              className="w-full h-[11.5rem] 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>