feat: auto-invalidate map size on element resize via ResizeObserver

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

@@ -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,