Fix range circles: zoom to fit, increase opacity, add distance tooltips

assets/js/propagation_map_hook.js

@@ -278,36 +278,45 @@ export const PropagationMap = {
     else if (score >= 33) rangeKm = Math.round(detail.typical_range_km * 0.6)
     else rangeKm = Math.round(detail.typical_range_km * 0.3)
 
-    // Outer circle — max estimated range (faded)
+    const typicalKm = detail.typical_range_km
+
+    // Outer circle — max estimated range
     L.circle(center, {
       radius: rangeKm * 1000,
       color: tier.color,
       weight: 2,
-      opacity: 0.6,
-      fillColor: tier.color,
-      fillOpacity: 0.06,
-      dashArray: "6,4"
-    }).addTo(this.rangeCircles)
-
-    // Inner circle — typical range (more visible)
-    const innerKm = Math.round(rangeKm * 0.6)
-    L.circle(center, {
-      radius: innerKm * 1000,
-      color: tier.color,
-      weight: 2,
       opacity: 0.8,
       fillColor: tier.color,
-      fillOpacity: 0.1
-    }).addTo(this.rangeCircles)
+      fillOpacity: 0.08,
+      dashArray: "8,6"
+    }).bindTooltip(`${rangeKm} km (max)`, { permanent: false, direction: "top" })
+      .addTo(this.rangeCircles)
+
+    // Inner circle — typical range
+    if (typicalKm < rangeKm) {
+      L.circle(center, {
+        radius: typicalKm * 1000,
+        color: tier.color,
+        weight: 2,
+        opacity: 0.9,
+        fillColor: tier.color,
+        fillOpacity: 0.12
+      }).bindTooltip(`${typicalKm} km (typical)`, { permanent: false, direction: "top" })
+        .addTo(this.rangeCircles)
+    }
 
     // Center marker
     L.circleMarker(center, {
-      radius: 5,
+      radius: 6,
       color: "#fff",
       weight: 2,
       fillColor: tier.color,
       fillOpacity: 1
     }).addTo(this.rangeCircles)
+
+    // Fit map to show the outer circle
+    const bounds = L.latLng(center).toBounds(rangeKm * 2 * 1000)
+    this.map.fitBounds(bounds, { padding: [50, 50], maxZoom: this.map.getZoom() })
   },
 
   sendBounds() {