From fdb06b8b565c1152070ce5e26b504584bd327f54 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Wed, 30 Sep 2026 09:26:50 +0000
Subject: [PATCH] Phone pages: the app's height no longer changes as the
 address bar hides or shows

The host page of every full-page map (and the Plugin Studio) sized the
element to the viewport in a way that tracks the phone's address bar:
- the built fixed-viewport leaf used position:fixed with inset:0, which
  follows the DYNAMIC viewport, so the map and its legend sheet resized
  on every scroll that moved the bar;
- the Plugin Studio page and the dev server's leaf and studio pages used
  100vh, the LARGE viewport, taller than the view while the bar shows, so
  the page itself scrolled by the bar's height and the app seemed to
  resize.
All four now use height:100svh (100% first as the fallback where svh is
unknown), anchored top-left, and set --profile-min-h:0 so ProfileLoader's
100dvh floor cannot grow the element when the bar hides. On a desktop svh
equals the viewport, so nothing moves there. Scroll-page leaves (the
cap-4 stacks) are unchanged.

Regenerated the tree: 51 leaf pages and the Plugin Studio page change
only this rule and its comment; no bundle changes.
---
 internal/generate-tree.mjs                      | 17 ++++++++++++++---
 internal/plugin-gallery/dev-plugin.mjs          |  7 +++++--
 .../all-people-groups/index.html                | 10 ++++++++--
 .../connectivity-list/index.html                | 10 ++++++++--
 .../cities-internet/connectivity-map/index.html | 10 ++++++++--
 .../cities-internet/data-tables/index.html      | 10 ++++++++--
 .../dx-maps/country-map/country-map/index.html  | 10 ++++++++--
 .../country-posters/countries-map/index.html    | 10 ++++++++--
 .../country-poster-wall/index.html              | 10 ++++++++--
 public/dx-maps/demo-map/demo-map/index.html     | 10 ++++++++--
 .../demo-map/demo-map/maplibre/index.html       | 10 ++++++++--
 .../doxa-maps-spa/doxa-maps-spa/app/index.html  | 10 ++++++++--
 .../doxa-maps-spa/doxa-maps-spa/index.html      | 10 ++++++++--
 .../doxa-research-map/research-map/index.html   | 10 ++++++++--
 .../research-map/maplibre/index.html            | 10 ++++++++--
 .../doxa-simple-map/adoption/index.html         | 10 ++++++++--
 .../doxa-simple-map/engagement/index.html       | 10 ++++++++--
 .../doxa-simple-map/doxa-simple-map/index.html  | 10 ++++++++--
 .../doxa-simple-map/prayer/index.html           | 10 ++++++++--
 .../doxa-vision-card/default/index.html         | 10 ++++++++--
 .../doxa-vision-card/frontier/index.html        | 10 ++++++++--
 .../doxa-vision-card/index.html                 | 10 ++++++++--
 .../golden-path-check/index.html                | 10 ++++++++--
 .../gospel-internet/board/board/index.html      | 10 ++++++++--
 public/dx-maps/gospel-internet/board/index.html | 10 ++++++++--
 .../board/india-china/index.html                | 10 ++++++++--
 .../board/language-tree/index.html              | 10 ++++++++--
 .../gospel-internet/board/platforms/index.html  | 10 ++++++++--
 .../board/project-700/index.html                | 10 ++++++++--
 .../gospel-internet/board/zero/index.html       | 10 ++++++++--
 .../dx-maps/gospel-resources/charts/index.html  | 10 ++++++++--
 .../gospel-resources/data-tables/index.html     | 10 ++++++++--
 .../gospel-resources/resources-list/index.html  | 10 ++++++++--
 .../gospel-resources/resources-map/index.html   | 10 ++++++++--
 public/dx-maps/index.html                       |  7 ++++++-
 .../my-upg-100-list/poster-wall/index.html      | 10 ++++++++--
 .../my-upg-100-list/upg-100-list/index.html     | 10 ++++++++--
 .../people-groups-grid/driven/index.html        | 10 ++++++++--
 .../people-groups-grid/index.html               | 10 ++++++++--
 .../people-groups-grid/index.html               | 10 ++++++++--
 .../plugin-studio/plugin-studio/index.html      | 10 ++++++++--
 .../plugin-studio/studio/index.html             | 10 ++++++++--
 .../pplr-data-maps/pplr-data-maps/index.html    | 10 ++++++++--
 .../prayer-walk-planner/index.html              | 10 ++++++++--
 .../region-dashboards/index.html                | 10 ++++++++--
 .../regions-dashboard/regions-list/index.html   | 10 ++++++++--
 .../research-dashboard/index.html               | 10 ++++++++--
 .../upg-neighbor/bloom-cockpit/index.html       | 10 ++++++++--
 .../upg-neighbor/flower-mesh/index.html         | 10 ++++++++--
 .../upg-neighbor/upg-neighbor/index.html        | 10 ++++++++--
 .../upg-neighbor/lang-cluster/index.html        | 10 ++++++++--
 .../upg-neighbor/send-map/index.html            | 10 ++++++++--
 .../upg-neighbor/upg-neighbors/index.html       | 10 ++++++++--
 .../wall-of-people-groups/index.html            | 10 ++++++++--
 54 files changed, 433 insertions(+), 108 deletions(-)

diff --git a/internal/generate-tree.mjs b/internal/generate-tree.mjs
index c178a03e1..60529df7f 100644
--- a/internal/generate-tree.mjs
+++ b/internal/generate-tree.mjs
@@ -798,7 +798,12 @@ function studioRootHtml(bakedToken, integrity = '') {
   <link rel="icon" href="data:,">
 ${bakedToken ? `  <script>window.MAP_TOKEN=${JSON.stringify(bakedToken)};</script>\n` : ''}${DEST_CONFIG.apiBaseUrl ? `  <script>window.MAP_APP_API_URL = ${JSON.stringify(DEST_CONFIG.apiBaseUrl)};</script>\n` : ''}  <style>
     html, body { margin: 0; padding: 0; height: 100%; background: #f3f3f1; }
-    plugin-studio { display: block; width: 100%; height: 100vh; }
+    /* 100svh, not 100vh: on a phone 100vh is the LARGE viewport, taller than what shows while the address bar is
+       up, so the page scrolls by the bar's height and the app seems to resize as the bar hides and shows. svh is
+       the viewport with the bar shown and never changes; 100% first is the fallback where svh is unknown. The
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would otherwise grow the element when
+       the bar hides. */
+    plugin-studio { display: block; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; }
   </style>
 </head>
 <body>
@@ -1027,9 +1032,15 @@ ${hintBlock}  ${peerBlock}
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
     #status.err { color: #f87171; }`
     : `/* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, ${esc(tag)} { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, ${esc(tag)} { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/internal/plugin-gallery/dev-plugin.mjs b/internal/plugin-gallery/dev-plugin.mjs
index 26eca3a9c..5b6ff2b62 100644
--- a/internal/plugin-gallery/dev-plugin.mjs
+++ b/internal/plugin-gallery/dev-plugin.mjs
@@ -417,7 +417,10 @@ export function autoSpaDevPlugin(token = '') {
                 // depends on no ancestor and stays a floor, so the page can still grow past it.
                 `${tag}{display:block;width:100%;min-height:100dvh;}</style>`
               : '<style>html,body{margin:0;padding:0;height:100%;background:#f3f3f1;}' +
-                `${tag}{display:block;width:100%;height:100vh;}</style>`,
+                // 100svh (100% as the fallback), not 100vh: a phone's 100vh is taller than the view while the address
+                // bar shows, so the page scrolls by the bar and the app seems to resize; --profile-min-h:0 opts out of
+                // ProfileLoader's 100dvh floor. The same rule as generate-tree's fixed-viewport leaf.
+                `${tag}{display:block;width:100%;height:100%;height:100svh;--profile-min-h:0;}</style>`,
             '</head><body>',
             // tree-base ON THE LEAF TOO — cap-5 shells nested here fetch a manifest of their own.
             // doxa-maps-spa (like plugin-studio) discovers its tabs from the tree's manifest.json and
@@ -483,7 +486,7 @@ export function autoSpaDevPlugin(token = '') {
             // that takes up so much space" is a layout requirement, so the host page contributes
             // ZERO text — every pixel belongs to the studio element.
             '<style>html,body{margin:0;padding:0;height:100%;background:#f3f3f1;}',
-            'plugin-studio{display:block;width:100%;height:100vh;}</style>',
+            'plugin-studio{display:block;width:100%;height:100%;height:100svh;--profile-min-h:0;}</style>',
             '</head><body>',
             // tree-base IS REQUIRED IN DEV — without it the studio mounts EMPTY.
             // The studio builds its tab list at runtime by fetching `<base>manifest.json`, and with
diff --git a/public/dx-maps/all-people-groups/all-people-groups/index.html b/public/dx-maps/all-people-groups/all-people-groups/index.html
index 77b413376..0f34812e8 100644
--- a/public/dx-maps/all-people-groups/all-people-groups/index.html
+++ b/public/dx-maps/all-people-groups/all-people-groups/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, all-people-groups { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, all-people-groups { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/cities-internet/connectivity-list/index.html b/public/dx-maps/cities-internet/connectivity-list/index.html
index 866d90b24..61f513a4a 100644
--- a/public/dx-maps/cities-internet/connectivity-list/index.html
+++ b/public/dx-maps/cities-internet/connectivity-list/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, cities-internet-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, cities-internet-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/cities-internet/connectivity-map/index.html b/public/dx-maps/cities-internet/connectivity-map/index.html
index 4be90bd80..a1da428a7 100644
--- a/public/dx-maps/cities-internet/connectivity-map/index.html
+++ b/public/dx-maps/cities-internet/connectivity-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, cities-internet-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, cities-internet-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/cities-internet/data-tables/index.html b/public/dx-maps/cities-internet/data-tables/index.html
index 9fb5cf6ca..54297b8fc 100644
--- a/public/dx-maps/cities-internet/data-tables/index.html
+++ b/public/dx-maps/cities-internet/data-tables/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, cities-internet-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, cities-internet-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/country-map/country-map/index.html b/public/dx-maps/country-map/country-map/index.html
index 9e750f5f3..3bfe2c2e8 100644
--- a/public/dx-maps/country-map/country-map/index.html
+++ b/public/dx-maps/country-map/country-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-country-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-country-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/country-posters/countries-map/index.html b/public/dx-maps/country-posters/countries-map/index.html
index d01173d12..d6d4cd7e6 100644
--- a/public/dx-maps/country-posters/countries-map/index.html
+++ b/public/dx-maps/country-posters/countries-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, country-posters-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, country-posters-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/country-posters/country-poster-wall/index.html b/public/dx-maps/country-posters/country-poster-wall/index.html
index 1e82a1760..1259ac0a3 100644
--- a/public/dx-maps/country-posters/country-poster-wall/index.html
+++ b/public/dx-maps/country-posters/country-poster-wall/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, country-posters-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, country-posters-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/demo-map/demo-map/index.html b/public/dx-maps/demo-map/demo-map/index.html
index b2675a195..63c45668a 100644
--- a/public/dx-maps/demo-map/demo-map/index.html
+++ b/public/dx-maps/demo-map/demo-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, demo-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, demo-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/demo-map/demo-map/maplibre/index.html b/public/dx-maps/demo-map/demo-map/maplibre/index.html
index d39f4b3e1..5f3b33f93 100644
--- a/public/dx-maps/demo-map/demo-map/maplibre/index.html
+++ b/public/dx-maps/demo-map/demo-map/maplibre/index.html
@@ -22,9 +22,15 @@
   <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js" integrity="sha384-5+cfbwT0iiub6VsQAdn6yz16nr6sDiQoHx6tm4O8OVYXHYOxcffFmCJBL0dgdvGp" crossorigin="anonymous"></script>
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, demo-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, demo-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html b/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html
index 8338c8cc2..a142b0631 100644
--- a/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html
+++ b/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-maps-spa { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-maps-spa { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-maps-spa/doxa-maps-spa/index.html b/public/dx-maps/doxa-maps-spa/doxa-maps-spa/index.html
index 20b36c732..d19a42c75 100644
--- a/public/dx-maps/doxa-maps-spa/doxa-maps-spa/index.html
+++ b/public/dx-maps/doxa-maps-spa/doxa-maps-spa/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-maps-spa { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-maps-spa { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-research-map/research-map/index.html b/public/dx-maps/doxa-research-map/research-map/index.html
index fdca4c7bd..1d2bef66d 100644
--- a/public/dx-maps/doxa-research-map/research-map/index.html
+++ b/public/dx-maps/doxa-research-map/research-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-research-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-research-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-research-map/research-map/maplibre/index.html b/public/dx-maps/doxa-research-map/research-map/maplibre/index.html
index ef11bc658..68bee0bb8 100644
--- a/public/dx-maps/doxa-research-map/research-map/maplibre/index.html
+++ b/public/dx-maps/doxa-research-map/research-map/maplibre/index.html
@@ -22,9 +22,15 @@
   <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js" integrity="sha384-5+cfbwT0iiub6VsQAdn6yz16nr6sDiQoHx6tm4O8OVYXHYOxcffFmCJBL0dgdvGp" crossorigin="anonymous"></script>
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-research-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-research-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-simple-map/doxa-simple-map/adoption/index.html b/public/dx-maps/doxa-simple-map/doxa-simple-map/adoption/index.html
index a3acce3c0..74aa793f3 100644
--- a/public/dx-maps/doxa-simple-map/doxa-simple-map/adoption/index.html
+++ b/public/dx-maps/doxa-simple-map/doxa-simple-map/adoption/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-simple-map/doxa-simple-map/engagement/index.html b/public/dx-maps/doxa-simple-map/doxa-simple-map/engagement/index.html
index bdd59e99f..9dfbc4abf 100644
--- a/public/dx-maps/doxa-simple-map/doxa-simple-map/engagement/index.html
+++ b/public/dx-maps/doxa-simple-map/doxa-simple-map/engagement/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-simple-map/doxa-simple-map/index.html b/public/dx-maps/doxa-simple-map/doxa-simple-map/index.html
index 0c29d07ec..ce12f5761 100644
--- a/public/dx-maps/doxa-simple-map/doxa-simple-map/index.html
+++ b/public/dx-maps/doxa-simple-map/doxa-simple-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-simple-map/doxa-simple-map/prayer/index.html b/public/dx-maps/doxa-simple-map/doxa-simple-map/prayer/index.html
index 3583d42b7..4e57908d9 100644
--- a/public/dx-maps/doxa-simple-map/doxa-simple-map/prayer/index.html
+++ b/public/dx-maps/doxa-simple-map/doxa-simple-map/prayer/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-vision-card/doxa-vision-card/default/index.html b/public/dx-maps/doxa-vision-card/doxa-vision-card/default/index.html
index 8c1405b90..5d2324d94 100644
--- a/public/dx-maps/doxa-vision-card/doxa-vision-card/default/index.html
+++ b/public/dx-maps/doxa-vision-card/doxa-vision-card/default/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-vision-card { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-vision-card { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-vision-card/doxa-vision-card/frontier/index.html b/public/dx-maps/doxa-vision-card/doxa-vision-card/frontier/index.html
index a4213f46d..445f61732 100644
--- a/public/dx-maps/doxa-vision-card/doxa-vision-card/frontier/index.html
+++ b/public/dx-maps/doxa-vision-card/doxa-vision-card/frontier/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-vision-card { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-vision-card { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/doxa-vision-card/doxa-vision-card/index.html b/public/dx-maps/doxa-vision-card/doxa-vision-card/index.html
index 87b00f8aa..45bfd90f0 100644
--- a/public/dx-maps/doxa-vision-card/doxa-vision-card/index.html
+++ b/public/dx-maps/doxa-vision-card/doxa-vision-card/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, doxa-vision-card { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, doxa-vision-card { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/golden-path-check/golden-path-check/index.html b/public/dx-maps/golden-path-check/golden-path-check/index.html
index c79be2551..899ddf0db 100644
--- a/public/dx-maps/golden-path-check/golden-path-check/index.html
+++ b/public/dx-maps/golden-path-check/golden-path-check/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, golden-path-check { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, golden-path-check { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-internet/board/board/index.html b/public/dx-maps/gospel-internet/board/board/index.html
index 8c9794b8a..72eec3a9f 100644
--- a/public/dx-maps/gospel-internet/board/board/index.html
+++ b/public/dx-maps/gospel-internet/board/board/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-internet-board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-internet-board { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-internet/board/index.html b/public/dx-maps/gospel-internet/board/index.html
index 4779c92bd..d35f39d9d 100644
--- a/public/dx-maps/gospel-internet/board/index.html
+++ b/public/dx-maps/gospel-internet/board/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-internet-board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-internet-board { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-internet/board/india-china/index.html b/public/dx-maps/gospel-internet/board/india-china/index.html
index c053d4415..30c98408e 100644
--- a/public/dx-maps/gospel-internet/board/india-china/index.html
+++ b/public/dx-maps/gospel-internet/board/india-china/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-internet-board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-internet-board { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-internet/board/language-tree/index.html b/public/dx-maps/gospel-internet/board/language-tree/index.html
index 1715e5b0e..94221e584 100644
--- a/public/dx-maps/gospel-internet/board/language-tree/index.html
+++ b/public/dx-maps/gospel-internet/board/language-tree/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-internet-board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-internet-board { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-internet/board/platforms/index.html b/public/dx-maps/gospel-internet/board/platforms/index.html
index c7a7c2e72..906a17e9e 100644
--- a/public/dx-maps/gospel-internet/board/platforms/index.html
+++ b/public/dx-maps/gospel-internet/board/platforms/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-internet-board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-internet-board { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-internet/board/project-700/index.html b/public/dx-maps/gospel-internet/board/project-700/index.html
index 60982f862..02550b2f6 100644
--- a/public/dx-maps/gospel-internet/board/project-700/index.html
+++ b/public/dx-maps/gospel-internet/board/project-700/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-internet-board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-internet-board { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-internet/board/zero/index.html b/public/dx-maps/gospel-internet/board/zero/index.html
index afc6b4364..51cab6efd 100644
--- a/public/dx-maps/gospel-internet/board/zero/index.html
+++ b/public/dx-maps/gospel-internet/board/zero/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-internet-board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-internet-board { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-resources/charts/index.html b/public/dx-maps/gospel-resources/charts/index.html
index f66278d41..fff562bb4 100644
--- a/public/dx-maps/gospel-resources/charts/index.html
+++ b/public/dx-maps/gospel-resources/charts/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-resources-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-resources-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-resources/data-tables/index.html b/public/dx-maps/gospel-resources/data-tables/index.html
index 7e72fc2da..f28df8e9f 100644
--- a/public/dx-maps/gospel-resources/data-tables/index.html
+++ b/public/dx-maps/gospel-resources/data-tables/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-resources-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-resources-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-resources/resources-list/index.html b/public/dx-maps/gospel-resources/resources-list/index.html
index fa88e7c54..06672efb0 100644
--- a/public/dx-maps/gospel-resources/resources-list/index.html
+++ b/public/dx-maps/gospel-resources/resources-list/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-resources-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-resources-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/gospel-resources/resources-map/index.html b/public/dx-maps/gospel-resources/resources-map/index.html
index 6d7cfa282..b26f6166c 100644
--- a/public/dx-maps/gospel-resources/resources-map/index.html
+++ b/public/dx-maps/gospel-resources/resources-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, gospel-resources-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, gospel-resources-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/index.html b/public/dx-maps/index.html
index 23d7cc6b4..e23c34c8b 100644
--- a/public/dx-maps/index.html
+++ b/public/dx-maps/index.html
@@ -14,7 +14,12 @@
   <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
   <style>
     html, body { margin: 0; padding: 0; height: 100%; background: #f3f3f1; }
-    plugin-studio { display: block; width: 100%; height: 100vh; }
+    /* 100svh, not 100vh: on a phone 100vh is the LARGE viewport, taller than what shows while the address bar is
+       up, so the page scrolls by the bar's height and the app seems to resize as the bar hides and shows. svh is
+       the viewport with the bar shown and never changes; 100% first is the fallback where svh is unknown. The
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would otherwise grow the element when
+       the bar hides. */
+    plugin-studio { display: block; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; }
   </style>
 </head>
 <body>
diff --git a/public/dx-maps/my-upg-100-list/poster-wall/index.html b/public/dx-maps/my-upg-100-list/poster-wall/index.html
index 8cbc5aee8..d29e3c0f5 100644
--- a/public/dx-maps/my-upg-100-list/poster-wall/index.html
+++ b/public/dx-maps/my-upg-100-list/poster-wall/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, my-upg-100-list-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, my-upg-100-list-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/my-upg-100-list/upg-100-list/index.html b/public/dx-maps/my-upg-100-list/upg-100-list/index.html
index a625df09e..25c1f4ffc 100644
--- a/public/dx-maps/my-upg-100-list/upg-100-list/index.html
+++ b/public/dx-maps/my-upg-100-list/upg-100-list/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, my-upg-100-list-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, my-upg-100-list-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/people-groups-grid/people-groups-grid/driven/index.html b/public/dx-maps/people-groups-grid/people-groups-grid/driven/index.html
index 36466181f..cd468d2c1 100644
--- a/public/dx-maps/people-groups-grid/people-groups-grid/driven/index.html
+++ b/public/dx-maps/people-groups-grid/people-groups-grid/driven/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, people-groups-grid { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, people-groups-grid { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/people-groups-grid/people-groups-grid/index.html b/public/dx-maps/people-groups-grid/people-groups-grid/index.html
index cda6b313b..77504ecf8 100644
--- a/public/dx-maps/people-groups-grid/people-groups-grid/index.html
+++ b/public/dx-maps/people-groups-grid/people-groups-grid/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, people-groups-grid { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, people-groups-grid { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/people-groups-grid/people-groups-grid/people-groups-grid/index.html b/public/dx-maps/people-groups-grid/people-groups-grid/people-groups-grid/index.html
index d85efbcfc..20842a55c 100644
--- a/public/dx-maps/people-groups-grid/people-groups-grid/people-groups-grid/index.html
+++ b/public/dx-maps/people-groups-grid/people-groups-grid/people-groups-grid/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, people-groups-grid { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, people-groups-grid { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/plugin-studio/plugin-studio/index.html b/public/dx-maps/plugin-studio/plugin-studio/index.html
index ad1ade9f7..687e5a86b 100644
--- a/public/dx-maps/plugin-studio/plugin-studio/index.html
+++ b/public/dx-maps/plugin-studio/plugin-studio/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, plugin-studio { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, plugin-studio { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/plugin-studio/plugin-studio/studio/index.html b/public/dx-maps/plugin-studio/plugin-studio/studio/index.html
index c489245d5..e519531d0 100644
--- a/public/dx-maps/plugin-studio/plugin-studio/studio/index.html
+++ b/public/dx-maps/plugin-studio/plugin-studio/studio/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, plugin-studio { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, plugin-studio { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/pplr-data-maps/pplr-data-maps/index.html b/public/dx-maps/pplr-data-maps/pplr-data-maps/index.html
index 4a30dbcc1..4bd9393b7 100644
--- a/public/dx-maps/pplr-data-maps/pplr-data-maps/index.html
+++ b/public/dx-maps/pplr-data-maps/pplr-data-maps/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, pplr-data-maps { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, pplr-data-maps { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/prayer-walk-planner/prayer-walk-planner/index.html b/public/dx-maps/prayer-walk-planner/prayer-walk-planner/index.html
index c055d9a1c..c3c9e75dc 100644
--- a/public/dx-maps/prayer-walk-planner/prayer-walk-planner/index.html
+++ b/public/dx-maps/prayer-walk-planner/prayer-walk-planner/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, prayer-walk-planner { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, prayer-walk-planner { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/regions-dashboard/region-dashboards/index.html b/public/dx-maps/regions-dashboard/region-dashboards/index.html
index 75c3c29ce..4f41df9c1 100644
--- a/public/dx-maps/regions-dashboard/region-dashboards/index.html
+++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, regions-dashboard { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, regions-dashboard { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/regions-dashboard/regions-list/index.html b/public/dx-maps/regions-dashboard/regions-list/index.html
index 3563d5271..bc9f5b68b 100644
--- a/public/dx-maps/regions-dashboard/regions-list/index.html
+++ b/public/dx-maps/regions-dashboard/regions-list/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, regions-dashboard { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, regions-dashboard { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/research-dashboard/research-dashboard/index.html b/public/dx-maps/research-dashboard/research-dashboard/index.html
index 68ec14c8f..ab89233cc 100644
--- a/public/dx-maps/research-dashboard/research-dashboard/index.html
+++ b/public/dx-maps/research-dashboard/research-dashboard/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, research-dashboard-map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, research-dashboard-map { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/upg-neighbor/upg-neighbor/bloom-cockpit/index.html b/public/dx-maps/upg-neighbor/upg-neighbor/bloom-cockpit/index.html
index fa648616c..8f5684714 100644
--- a/public/dx-maps/upg-neighbor/upg-neighbor/bloom-cockpit/index.html
+++ b/public/dx-maps/upg-neighbor/upg-neighbor/bloom-cockpit/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, upg-neighbor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, upg-neighbor { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/upg-neighbor/upg-neighbor/flower-mesh/index.html b/public/dx-maps/upg-neighbor/upg-neighbor/flower-mesh/index.html
index fa648616c..8f5684714 100644
--- a/public/dx-maps/upg-neighbor/upg-neighbor/flower-mesh/index.html
+++ b/public/dx-maps/upg-neighbor/upg-neighbor/flower-mesh/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, upg-neighbor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, upg-neighbor { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/upg-neighbor/upg-neighbor/index.html b/public/dx-maps/upg-neighbor/upg-neighbor/index.html
index 5ea993da8..bf4adb4c3 100644
--- a/public/dx-maps/upg-neighbor/upg-neighbor/index.html
+++ b/public/dx-maps/upg-neighbor/upg-neighbor/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, upg-neighbor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, upg-neighbor { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/upg-neighbor/upg-neighbor/lang-cluster/index.html b/public/dx-maps/upg-neighbor/upg-neighbor/lang-cluster/index.html
index 165103d45..74efad383 100644
--- a/public/dx-maps/upg-neighbor/upg-neighbor/lang-cluster/index.html
+++ b/public/dx-maps/upg-neighbor/upg-neighbor/lang-cluster/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, upg-neighbor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, upg-neighbor { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/upg-neighbor/upg-neighbor/send-map/index.html b/public/dx-maps/upg-neighbor/upg-neighbor/send-map/index.html
index fa648616c..8f5684714 100644
--- a/public/dx-maps/upg-neighbor/upg-neighbor/send-map/index.html
+++ b/public/dx-maps/upg-neighbor/upg-neighbor/send-map/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, upg-neighbor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, upg-neighbor { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/upg-neighbor/upg-neighbor/upg-neighbors/index.html b/public/dx-maps/upg-neighbor/upg-neighbor/upg-neighbors/index.html
index dcdf50956..826467cce 100644
--- a/public/dx-maps/upg-neighbor/upg-neighbor/upg-neighbors/index.html
+++ b/public/dx-maps/upg-neighbor/upg-neighbor/upg-neighbors/index.html
@@ -26,9 +26,15 @@
        check:leaf-engine-per-provider (0 Mapbox requests under maplibre; Mapbox unchanged). -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, upg-neighbor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, upg-neighbor { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
diff --git a/public/dx-maps/wall-of-people-groups/wall-of-people-groups/index.html b/public/dx-maps/wall-of-people-groups/wall-of-people-groups/index.html
index a4c6efe98..c8946fbd5 100644
--- a/public/dx-maps/wall-of-people-groups/wall-of-people-groups/index.html
+++ b/public/dx-maps/wall-of-people-groups/wall-of-people-groups/index.html
@@ -17,9 +17,15 @@
        which loads its own map peer + token. A peer here would be dead weight + imply a gate. -->
   <style>
     /* BARE full-page map — no chrome. The custom element IS the page, so the
-       browser URL shares the map itself. */
+       browser URL shares the map itself.
+       HEIGHT IN svh, NOT inset:0. A fixed box with inset:0 follows the phone's DYNAMIC viewport, so the map
+       (and a legend sheet sized from it) changes height every time the address bar hides or shows. 100svh is
+       the viewport WITH the bar shown and never changes; when the bar hides, the page background shows below
+       instead of the map resizing. On a desktop svh = the viewport, so nothing moves there. The 100% before it
+       is the fallback for a browser without svh, which would otherwise size the box to its content.
+       --profile-min-h:0 opts out of ProfileLoader's 100dvh floor, which would grow the element again. */
     html, body { height: 100%; margin: 0; background: #0a0e15; }
-    #slot, wall-of-people-groups { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+    #slot, wall-of-people-groups { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; height: 100svh; --profile-min-h: 0; display: block; }
     #status { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
       padding: 24px; text-align: center; color: #9aa7b8;
       font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }