rfcp/docs/devlog/gpu_supp/RFCP-3.10.1-UI-Bugfixes.md

# RFCP — Iteration 3.10.1: UI/UX Bugfixes

## Overview
Four bugs found during 3.10 testing. All are frontend issues, no backend changes needed.

---

## Bug 1: Ruler places point when clicking Terrain Profile button

**Problem:** When Ruler mode is active and user clicks "Terrain Profile" button in the measurement overlay, it also places a ruler point on the map underneath. The click event propagates to the map.

**Fix:** Stop event propagation on the Terrain Profile button click handler. The Terrain Profile button (and any overlay UI elements) should call `e.stopPropagation()` to prevent the click from reaching the map layer.

Also review: any other UI overlays that sit on top of the map (Link Budget panel, coverage controls, etc.) should also stop propagation to prevent accidental ruler/site placement.

**Files to check:**
- MeasurementTool component (Terrain Profile button handler)
- Any overlay/popup components that sit on top of the Leaflet map

---

## Bug 2: Cursor should be default arrow, not hand; Ruler snap to site

**Problem A:** The map cursor shows as a grab/hand icon. Should be default arrow cursor for normal mode. Hand cursor should only appear when dragging the map.

**Fix A:** Set Leaflet map cursor styles:
```css
/* Default cursor */
.leaflet-container {
  cursor: default !important;
}

/* Grabbing only when dragging */
.leaflet-container.leaflet-drag-target {
  cursor: grabbing !important;
}

/* Crosshair for ruler mode */
.leaflet-container.ruler-mode {
  cursor: crosshair !important;
}

/* Crosshair for RX point placement mode */
.leaflet-container.rx-placement-mode {
  cursor: crosshair !important;
}
```

Apply CSS classes to the map container based on current mode. Remove Leaflet's default grab cursor.

**Problem B:** When using the ruler, it should be possible to snap the ruler start/end point exactly to a site (tower) location. Currently you have to eyeball it.

**Fix B:** When in ruler mode and clicking near a site marker (within ~20px), snap the ruler point to the exact site coordinates. This gives precise distance measurements from tower to any point.

```typescript
// In ruler click handler:
const SNAP_DISTANCE_PX = 20;

function findNearestSite(clickLatLng: L.LatLng, map: L.Map): Site | null {
  const clickPoint = map.latLngToContainerPoint(clickLatLng);
  let nearest: Site | null = null;
  let minDist = Infinity;
  
  for (const site of sites) {
    const sitePoint = map.latLngToContainerPoint(L.latLng(site.lat, site.lon));
    const dist = clickPoint.distanceTo(sitePoint);
    if (dist < SNAP_DISTANCE_PX && dist < minDist) {
      minDist = dist;
      nearest = site;
    }
  }
  return nearest;
}

// When placing ruler point:
const snappedSite = findNearestSite(clickLatLng, map);
if (snappedSite) {
  // Use exact site coordinates
  rulerPoint = L.latLng(snappedSite.lat, snappedSite.lon);
} else {
  rulerPoint = clickLatLng;
}
```

---

## Bug 3: Link Budget Calculator text invisible + RX point not placed on map

**Problem A:** Text in Link Budget Calculator panel is black on dark background — invisible. The input fields and labels need light text color for dark theme.

**Fix A:** Ensure all text in LinkBudgetPanel uses light colors:
```css
/* All text in the panel should be light */
color: #e2e8f0;  /* or whatever the app's light text color is */

/* Input fields */
input {
  color: #e2e8f0;
  background: #1e293b;  /* dark input background */
  border: 1px solid #475569;
}

/* Labels */
label {
  color: #94a3b8;  /* slightly muted for labels */
}

/* Values/results */
.result-value {
  color: #f1f5f9;  /* bright white for important values */
}
```

Check if the panel is using Tailwind classes — if so, ensure `text-slate-200` or similar is applied to the container. The panel likely inherits wrong text color or has hardcoded dark text.

**Problem B:** When clicking "Click on Map to Set RX Point" and then clicking on the map, the RX marker does not appear on the map. The coordinates might update in the fields but there's no visual indicator.

**Fix B:** When RX point is set:
1. Place a visible marker on the map at the RX location (use a different icon than the TX site — e.g., a small circle or pin in a different color like orange or blue)
2. Draw a dashed line from the TX site to the RX marker
3. The marker should be draggable to adjust position
4. When Link Budget panel is closed, remove the RX marker and line

```typescript
// RX marker icon (different from site markers)
const rxIcon = L.divIcon({
  className: 'rx-marker',
  html: '<div style="width: 12px; height: 12px; background: #f97316; border: 2px solid white; border-radius: 50%;"></div>',
  iconSize: [12, 12],
  iconAnchor: [6, 6],
});

// Place marker
const rxMarker = L.marker([rxLat, rxLon], { icon: rxIcon, draggable: true }).addTo(map);

// Dashed line from TX to RX
const linkLine = L.polyline([[txLat, txLon], [rxLat, rxLon]], {
  color: '#f97316',
  weight: 2,
  dashArray: '8, 4',
  opacity: 0.8,
}).addTo(map);

// Update on drag
rxMarker.on('drag', (e) => {
  const pos = e.target.getLatLng();
  linkLine.setLatLngs([[txLat, txLon], [pos.lat, pos.lng]]);
  // Update Link Budget panel coordinates
  updateRxCoordinates(pos.lat, pos.lng);
});
```

---

## Bug 4: Elevation color opacity not working

**Problem:** The opacity control for elevation/terrain colors on the map is not functioning. Adjusting the opacity slider has no effect on the terrain overlay visibility.

**Fix:** Check how the elevation overlay is rendered:

1. If it's a tile layer (Leaflet tile overlay), use `layer.setOpacity(value)`
2. If it's the topo map layer, the opacity needs to be applied to the correct layer reference
3. If it's the coverage heatmap opacity that's broken, check the canvas renderer opacity

The "Elev" button on the right toolbar likely toggles an elevation visualization. Find where this layer is created and ensure:

```typescript
// When opacity slider changes:
elevationLayer.setOpacity(opacityValue);

// Or if it's a canvas overlay:
const canvas = document.querySelector('.elevation-overlay');
if (canvas) {
  canvas.style.opacity = String(opacityValue);
}
```

Also check: there might be TWO opacity controls that are confused:
- Coverage heatmap opacity (the RSRP colors)
- Terrain/elevation color overlay opacity (the topo colors)

Make sure each slider controls the correct layer.

---

## Testing Checklist

- [ ] Click Terrain Profile button with Ruler active — NO extra ruler point placed
- [ ] Default cursor is arrow, not hand
- [ ] Cursor changes to crosshair in Ruler mode
- [ ] Cursor changes to crosshair in RX placement mode
- [ ] Ruler snaps to site when clicking near tower marker
- [ ] Link Budget panel text is readable (light on dark)
- [ ] Clicking map in RX mode places visible orange marker
- [ ] Dashed line drawn from TX to RX
- [ ] RX marker removed when panel closes
- [ ] Elevation opacity slider actually changes overlay transparency

## Commit Message

```
fix(ui): resolve ruler propagation, cursor, link budget visibility, elevation opacity

- Stop click propagation on Terrain Profile button (prevents ruler point)
- Change default cursor to arrow, crosshair for tool modes
- Add ruler snap-to-site (20px threshold)
- Fix Link Budget panel text colors for dark theme
- Add RX marker and dashed line on map
- Fix elevation overlay opacity control binding
```