From 42e73f5eebbc398d307028f10f696377b58eaa2d Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sun, 1 Mar 2026 17:27:38 +0100
Subject: [PATCH] [fix](trx-frontend): fix APRS map popup age, distance, and
 dark theme

- Rebuild popup content on popupopen event so age and distance
  are always computed fresh at the moment of opening; store
  _aprsCall on each marker for O(1) lookup
- Extend map to fill viewport down to the footer instead of 60%
- Override Leaflet popup background/color to use CSS theme vars,
  fixing invisible text in dark theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js       | 22 ++++++++++++++++---
 .../trx-frontend-http/assets/web/style.css    |  3 +++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index f4e232d..3cee5c4 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -2422,6 +2422,16 @@ function initAprsMap() {
     }).addTo(aprsMap).bindPopup(popupText);
   }
 
+  // Rebuild APRS popup content on open so age and distance are always fresh
+  aprsMap.on("popupopen", function(e) {
+    const marker = e.popup._source;
+    if (!marker || !marker._aprsCall) return;
+    const entry = stationMarkers.get(marker._aprsCall);
+    if (!entry) return;
+    const ll = marker.getLatLng();
+    e.popup.setContent(buildAprsPopupHtml(marker._aprsCall, ll.lat, ll.lng, entry.pkt?.info || "", entry.pkt));
+  });
+
   const aprsFilter = document.getElementById("map-filter-aprs");
   const ft8Filter = document.getElementById("map-filter-ft8");
   const wsprFilter = document.getElementById("map-filter-wspr");
@@ -2448,9 +2458,14 @@ function initAprsMap() {
 function sizeAprsMapToViewport() {
   const mapEl = document.getElementById("aprs-map");
   if (!mapEl) return;
-  const topPadding = parseFloat(getComputedStyle(document.body).paddingTop) || 0;
-  const available = Math.max(0, window.innerHeight - topPadding);
-  const target = Math.max(150, Math.floor(available * 0.6));
+  const mapRect = mapEl.getBoundingClientRect();
+  const footer = document.querySelector(".footer");
+  let bottom = window.innerHeight;
+  if (footer) {
+    const fr = footer.getBoundingClientRect();
+    if (fr.top > mapRect.top + 50) bottom = fr.top;
+  }
+  const target = Math.max(150, Math.floor(bottom - mapRect.top - 8));
   mapEl.style.height = `${target}px`;
   if (aprsMap) aprsMap.invalidateSize();
 }
@@ -2554,6 +2569,7 @@ window.aprsMapAddStation = function(call, lat, lon, info, symbolTable, symbolCod
           radius: 6, color: "#00d17f", fillColor: "#00d17f", fillOpacity: 0.8
         }).addTo(aprsMap).bindPopup(popupContent);
     marker.__trxType = "aprs";
+    marker._aprsCall = call;
     stationMarkers.set(call, { marker, type: "aprs", pkt });
     mapMarkers.add(marker);
     applyMapFilter();
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index a51a9a9..67c8bf0 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -1072,6 +1072,9 @@ small { color: var(--text-muted); }
 .aprs-symbol { display: inline-block; width: 24px; height: 24px; background-size: 384px 192px; vertical-align: middle; margin-right: 0.3rem; }
 .aprs-pos { color: var(--accent-green); text-decoration: none; margin-left: 0.3rem; font-size: 0.8rem; }
 .aprs-pos:hover { text-decoration: underline; }
+.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card-bg) !important; color: var(--text) !important; box-shadow: 0 3px 14px rgba(0,0,0,0.45) !important; }
+.leaflet-popup-close-button { color: var(--text-muted) !important; }
+.leaflet-popup-close-button:hover { color: var(--text) !important; }
 .aprs-popup { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.82rem; min-width: 12rem; max-width: 22rem; }
 .aprs-popup-call { font-weight: 700; font-size: 1em; color: var(--accent-green); margin-bottom: 0.18rem; }
 .aprs-popup-meta { font-size: 0.85em; color: var(--text-muted); margin-bottom: 0.3rem; }