HotFix2

CHANGELOG.md

@@ -31,8 +31,7 @@ Format follows [Keep a Changelog](https://keepachangelog.com/) and [Semantic Ver
 ### Changed
 - 🔄 `meshcore_gui/static/leaflet_map_panel.js` — Added size guard in `ensureMap`:
   returns `null` when host has `clientWidth === 0 && clientHeight === 0` and no map
-  state exists yet. `processPending` now explicitly reschedules itself until the panel
-  becomes visible, instead of silently returning and leaving the map pending forever.
+  state exists yet. `processPending` retries on the next tick once the panel is visible.
 - 🔄 `meshcore_gui/gui/dashboard.py` — Consolidated two conditional map-update blocks
   into a single unconditional update while the MAP panel is active. Added `h-96` to the
   DOMCA CSS height overrides for consistency with the route page map container.
@@ -838,3 +837,8 @@ overwriting all historical data with only the new buffered messages.
 ### Changed
 - Map lifecycle is browser-owned: NiceGUI hosts the container, Leaflet owns map state.
 - Contact markers are updated incrementally in the existing cluster layer.
+
+## 2026-03-12 map host bootstrap fix
+- Fixed dashboard MAP bootstrap for hidden/inactive panels by rendering the Leaflet host as a real NiceGUI `div` element instead of injecting raw HTML inside a hidden container.
+- Fixed browser bootstrap retries so a zero-size hidden host is retried instead of being dropped permanently.
+- Simplified host waiting logic to polling-based retries, which avoids missing late NiceGUI DOM inserts while the MAP panel is still being mounted.

meshcore_gui/gui/panels/map_panel.py

@@ -45,9 +45,9 @@ class MapPanel:
                         on_change=lambda e: self._set_map_theme_mode(e.value),
                     ).props('dense')
                     ui.button('Center on Device', on_click=self._center_on_device)
-            ui.html(
-                f'<div id="{self._container_id}" class="meshcore-leaflet-host w-full h-72"></div>'
-            ).classes('w-full h-72')
+            ui.element('div').props(f'id={self._container_id}').classes(
+                'meshcore-leaflet-host w-full h-72'
+            )
             self._dispatch_to_browser(snapshot={'__command__': 'ensure_map'})
             self._apply_theme_only()
 

meshcore_gui/static/leaflet_map_panel.js

@@ -504,35 +504,21 @@
       return;
     }
 
-    const observer = new MutationObserver(() => {
+    const timer = window.setTimeout(() => {
+      watchers.delete(containerId);
       const host = document.getElementById(containerId);
-      if (!host) {
+      if (host) {
+        scheduleProcess(containerId, retries + 1);
         return;
       }
-      observer.disconnect();
-      watchers.delete(containerId);
-      scheduleProcess(containerId, retries + 1);
-    });
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    });
-
-    watchers.set(containerId, observer);
-
-    window.setTimeout(() => {
-      if (watchers.get(containerId) !== observer) {
-        return;
-      }
-      observer.disconnect();
-      watchers.delete(containerId);
       if (retries >= MAX_RETRIES) {
         console.error('MeshCoreLeafletBoot timeout waiting for host element', { containerId });
         return;
       }
       scheduleProcess(containerId, retries + 1);
     }, RETRY_DELAY_MS);
+
+    watchers.set(containerId, timer);
   }
 
   function isDomReady() {