From 93c9408f6b1d13ce25020b6ba93c94a168dfbc8e Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Thu, 5 Mar 2026 22:58:27 +0100
Subject: [PATCH] fix(admin): render Leaflet maps in template preview

The .card wrapper has overflow:hidden which clips Leaflet's
absolutely-positioned tile layers. Override to overflow:visible
on the rendered-article card. Add .catch() to map fetch calls.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                                | 1 +
 .../padelnomics/admin/templates/admin/template_preview.html | 4 ++--
 web/src/padelnomics/static/js/article-maps.js               | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 996d238..5a5f5c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ## [Unreleased]
 
 ### Fixed
+- **Admin template preview maps** — Leaflet maps rendered blank in admin preview due to `.card` `overflow: hidden` clipping tile layers. Set `overflow: visible` on the rendered-article card. Also added `.catch()` handlers to map fetch calls so failures are logged to console.
 - **Pipeline diagnostic script** (`scripts/check_pipeline.py`) — handle DuckDB catalog naming quirk where `lakehouse.duckdb` uses catalog `lakehouse` instead of `local`, causing SQLMesh logical views to break. Script now auto-detects the catalog via `USE`, and falls back to querying physical tables (`sqlmesh__<schema>.<table>__<hash>`) when views fail.
 - **Eurostat gas prices extractor** — `nrg_pc_203` filter missing `unit` dimension (API returns both KWH and GJ_GCV); now filters to `KWH`.
 - **Eurostat labour costs extractor** — `lc_lci_lev` used non-existent `currency` filter dimension; corrected to `unit: EUR`.
diff --git a/web/src/padelnomics/admin/templates/admin/template_preview.html b/web/src/padelnomics/admin/templates/admin/template_preview.html
index 6395fa8..82858c6 100644
--- a/web/src/padelnomics/admin/templates/admin/template_preview.html
+++ b/web/src/padelnomics/admin/templates/admin/template_preview.html
@@ -25,8 +25,8 @@
     </div>
   </div>
 
-  {# Rendered article #}
-  <div class="card">
+  {# Rendered article — overflow:visible needed so Leaflet tile layers render #}
+  <div class="card" style="overflow: visible;">
     <h2 class="text-lg mb-4">Rendered HTML</h2>
     <div class="article-body" style="max-width: none;">
       {{ preview.html | safe }}
diff --git a/web/src/padelnomics/static/js/article-maps.js b/web/src/padelnomics/static/js/article-maps.js
index 38de362..bf7753d 100644
--- a/web/src/padelnomics/static/js/article-maps.js
+++ b/web/src/padelnomics/static/js/article-maps.js
@@ -58,7 +58,8 @@
           bounds.push([c.lat, c.lon]);
         });
         if (bounds.length) map.fitBounds(bounds, { padding: [24, 24] });
-      });
+      })
+      .catch(function(err) { console.error('Country map fetch failed:', err); });
   }
 
   var VENUE_ICON = L.divIcon({
@@ -94,7 +95,8 @@
             .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -7] })
             .addTo(map);
         });
-      });
+      })
+      .catch(function(err) { console.error('City map fetch failed:', err); });
   }
 
   /* Dynamically load Leaflet JS then init maps */