From abb93c951178e2ce2a82460ff137797ed8c1f42f Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Thu, 30 Apr 2026 14:04:14 -0500
Subject: [PATCH] feat(weather): always-visible close button on weather detail
 panel

---
 assets/js/weather_map_hook.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/assets/js/weather_map_hook.ts b/assets/js/weather_map_hook.ts
index dc05f2bc..993c3a6a 100644
--- a/assets/js/weather_map_hook.ts
+++ b/assets/js/weather_map_hook.ts
@@ -637,9 +637,7 @@ function buildDetailHTML(point: WeatherPoint): string {
   ]
 
   const mobile = isMobile()
-  const closeBtn = mobile
-    ? `<button onclick="document.getElementById('weather-detail-panel').style.display='none'" style="position:absolute;top:8px;right:10px;background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:18px;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">&times;</button>`
-    : ""
+  const closeBtn = `<button class="detail-close-btn" title="Close" style="position:absolute;top:8px;right:10px;background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:18px;line-height:1;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;">&times;</button>`
   const handle = mobile
     ? `<div style="display:flex;justify-content:center;padding:6px 0 2px;"><div style="width:32px;height:4px;border-radius:2px;background:rgba(255,255,255,0.3);"></div></div>`
     : ""
@@ -737,6 +735,15 @@ export const WeatherMap: WeatherMapHook = {
     if (this.detailPanel) {
       L.DomEvent.disableClickPropagation(this.detailPanel)
       L.DomEvent.disableScrollPropagation(this.detailPanel)
+
+      this.detailPanel.addEventListener("click", (e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".detail-close-btn") && this.detailPanel) {
+          this.detailPanel.style.display = "none"
+          this.detailPanel.innerHTML = ""
+          this.clickMarker?.clearLayers()
+          if (this.escHint) this.escHint.style.opacity = "0"
+        }
+      })
     }
 
     // ESC hint