fix: beam heading full color

frontend/src/components/MainMap.tsx

@@ -164,21 +164,19 @@ export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, b
           return out;
         };
         for (const az of beamAzimuths) {
-          // Draw the lobe as a FAN of translucent great-circle radials, not a
+          // Draw the lobe as a single FILLED shape that HUGS the great-circle
-          // filled polygon: a polygon breaks badly near the poles on Mercator
+          // curve: bound it by the two edge radials (az ± half-beamwidth), each a
-          // (its edges run off toward ±90° and the fill smears across the map),
+          // great-circle line, joined by a short far cap. Filling between the two
-          // while each radial LINE stays clean. The overlapping lines read as a
+          // curved edges follows the arc instead of making a straight triangle.
-          // lobe — solid near the antenna, fanning out toward the front. Works
+          const edgeL = radial(az - half);
-          // for any azimuth, north/south included.
+          const edgeR = radial(az + half);
-          for (let b = az - half; b <= az + half + 0.001; b += 1.5) {
+          const lobe = [[from.lat, from.lon], ...edgeL, ...edgeR.slice().reverse()] as [number, number][];
-            const line = unwrapLon([[from.lat, from.lon], ...radial(b)]);
+          L.polygon(unwrapLon(lobe) as L.LatLngExpression[],
-            L.polyline(line as L.LatLngExpression[], { color: '#ff2d2d', weight: 6, opacity: 0.12, smoothFactor: 0 }).addTo(wo);
+            { stroke: false, fillColor: '#ff2d2d', fillOpacity: 0.18, smoothFactor: 0 }).addTo(wo);
-          }
+
           const cl = unwrapLon([[from.lat, from.lon], ...radial(az)]);
           // Dark casing under the boresight so the bright dashed line stays
-          // readable on any basemap (esp. dark satellite imagery). Same dashArray
+          // readable on any basemap. Same dashArray so the casing tracks each dash.
-          // as the red line so the casing tracks each dash — otherwise the wide
-          // casing peeks through the gaps and the line looks bumpy.
           L.polyline(cl as L.LatLngExpression[], { color: '#000', weight: 4, opacity: 0.4, dashArray: '5 4', smoothFactor: 0 }).addTo(wo);
           L.polyline(cl as L.LatLngExpression[], { color: '#ff2d2d', weight: 2, opacity: 0.95, dashArray: '5 4', smoothFactor: 0 })
             .bindTooltip(`Beam ${Math.round(az)}°`, { permanent: false, direction: 'top' }).addTo(wo);