From 2c2e83b7d02af997cc3350b3021cca288818f988 Mon Sep 17 00:00:00 2001
From: Buddy <git@buddy.wtf>
Date: Sat, 6 Jun 2026 16:11:03 -0700
Subject: [PATCH] feat: auto-invalidate map size on element resize via
 ResizeObserver
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the height-attribute approach with a ResizeObserver on the host
element so the map re-renders whenever its container size changes from
any source — CSS class, inline style, parent layout, etc.
---
 src/components/leaflet-map.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/leaflet-map.ts b/src/components/leaflet-map.ts
index a383ca3..cd1a92b 100644
--- a/src/components/leaflet-map.ts
+++ b/src/components/leaflet-map.ts
@@ -165,6 +165,7 @@ export class LeafletMap extends TypedBase {
   #cssLink?: HTMLLinkElement;
   #syncing = false;
   #mapEventHandlers = new globalThis.Map<string, () => void>();
+  #resizeObserver?: ResizeObserver;
 
   static get observedAttributes(): string[] {
     return [...Object.values(PROPS).map((s) => s.attr), ...CSS_ATTRS];
@@ -241,6 +242,9 @@ export class LeafletMap extends TypedBase {
     map.setView([lat, lng], zoom);
     this.#map = map;
 
+    this.#resizeObserver = new ResizeObserver(() => this.#map?.invalidateSize());
+    this.#resizeObserver.observe(this);
+
     // Register one handler per unique map event, updating all props that share it
     const groups = new globalThis.Map<string, NumProp[]>();
     for (const spec of Object.values(PROPS) as PropDef[]) {
@@ -270,6 +274,8 @@ export class LeafletMap extends TypedBase {
   }
 
   disconnectedCallback() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = undefined;
     this.removeEventListener(
       'leaflet-register',
       this.#handleLeafletRegister as EventListenerOrEventListenerObject,