From 8f5b53180bedbea9822dd8f9519184757f69f90d Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 31 Mar 2026 13:08:21 -0500
Subject: [PATCH] Use propagation tier color as popup header background

---
 assets/js/propagation_map_hook.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js
index 2ab1a3d9..9b06f204 100644
--- a/assets/js/propagation_map_hook.js
+++ b/assets/js/propagation_map_hook.js
@@ -60,17 +60,19 @@ function buildPopupHTML(detail) {
   }
 
   return `<div style="color:#333;min-width:280px;">
-    <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;">
+    <div style="background:${tier.color};color:#000;padding:6px 10px;margin:-1px -1px 0 -1px;border-radius:4px 4px 0 0;display:flex;justify-content:space-between;align-items:baseline;">
       <strong style="font-size:16px;">${detail.score}/100</strong>
-      <span style="background:${tier.color};color:#000;padding:1px 8px;border-radius:4px;font-size:11px;font-weight:700;">${tier.label}</span>
+      <span style="font-size:13px;font-weight:700;">${tier.label}</span>
     </div>
-    <div style="font-size:12px;color:#666;margin-bottom:6px;">
-      ${detail.band_label} &mdash; Est. range: ${range} (CW)<br>
-      ${detail.lat.toFixed(3)}\u00b0N, ${Math.abs(detail.lon).toFixed(3)}\u00b0W &mdash; ${time}
+    <div style="padding:6px 10px;">
+      <div style="font-size:12px;color:#666;margin-bottom:6px;">
+        ${detail.band_label} &mdash; Est. range: ${range} (CW)<br>
+        ${detail.lat.toFixed(3)}\u00b0N, ${Math.abs(detail.lon).toFixed(3)}\u00b0W &mdash; ${time}
+      </div>
+      <table style="width:100%;border-collapse:collapse;border-top:1px solid #ddd;padding-top:4px;">
+        ${rows}
+      </table>
     </div>
-    <table style="width:100%;border-collapse:collapse;border-top:1px solid #ddd;padding-top:4px;">
-      ${rows}
-    </table>
   </div>`
 }