diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/map-core.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/map-core.js index a8755ecb..5c8f748e 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/map-core.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/map-core.js @@ -1647,18 +1647,13 @@ var mapWindow = window; return; } const mapRect = mapContainer.getBoundingClientRect(); - const width = mapContainer.clientWidth || mapRect.width; const footer = document.querySelector(".footer"); - let bottom = mapIsFullscreen() && stage ? stage.getBoundingClientRect().bottom : window.innerHeight; - if (!mapIsFullscreen() && footer) { + let bottom = window.innerHeight; + if (footer) { const fr = footer.getBoundingClientRect(); - if (fr.top > mapRect.top + 50) bottom = fr.top; + if (fr.top > mapRect.top + 50) bottom = Math.min(fr.top, bottom); } - const available = Math.max(0, Math.floor(bottom - mapRect.top - 8)); - const widthDriven = width > 0 ? Math.floor(width / 1.55) : available; - const viewportCap = mapIsFullscreen() ? Math.floor(window.innerHeight * 0.9) : Math.floor(window.innerHeight * 0.75); - const minHeight = Math.min(260, available); - const target = Math.max(minHeight, Math.min(available, viewportCap, widthDriven)); + const target = Math.max(0, Math.floor(bottom - mapRect.top - 8)); mapContainer.style.height = `${target}px`; if (aprsMap) aprsMap.invalidateSize(); } diff --git a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/map-core.ts b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/map-core.ts index d9040c84..f256a733 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/map-core.ts +++ b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/map-core.ts @@ -1980,23 +1980,21 @@ const mapWindow = window as unknown as MapWindow; if (aprsMap) aprsMap.invalidateSize(); return; } + // Everything below is the windowed path — the fullscreen branch returned. + // The map tab is a whole page, so the stage fills the column down to the + // footer. Capping it at a fraction of the viewport, or at a width-derived + // aspect ratio, left a dead band under the map that grew with the window + // (and on narrow screens made the map barely a third of the page). const mapRect = mapContainer.getBoundingClientRect(); - const width = mapContainer.clientWidth || mapRect.width; const footer = document.querySelector(".footer"); - let bottom = mapIsFullscreen() && stage - ? stage.getBoundingClientRect().bottom - : window.innerHeight; - if (!mapIsFullscreen() && footer) { + let bottom = window.innerHeight; + if (footer) { const fr = footer.getBoundingClientRect(); - if (fr.top > mapRect.top + 50) bottom = fr.top; + // Clamped to the viewport: once the column is tall enough to push the + // footer below the fold, growing into it would push it further still. + if (fr.top > mapRect.top + 50) bottom = Math.min(fr.top, bottom); } - const available = Math.max(0, Math.floor(bottom - mapRect.top - 8)); - const widthDriven = width > 0 ? Math.floor(width / 1.55) : available; - const viewportCap = mapIsFullscreen() - ? Math.floor(window.innerHeight * 0.9) - : Math.floor(window.innerHeight * 0.75); - const minHeight = Math.min(260, available); - const target = Math.max(minHeight, Math.min(available, viewportCap, widthDriven)); + const target = Math.max(0, Math.floor(bottom - mapRect.top - 8)); mapContainer.style.height = `${target}px`; if (aprsMap) aprsMap.invalidateSize(); } diff --git a/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/browser-smoke.mjs b/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/browser-smoke.mjs index ed053be4..4f35c38c 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/browser-smoke.mjs +++ b/src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/browser-smoke.mjs @@ -237,11 +237,18 @@ try { right: Math.round(rect.right), viewport: document.documentElement.clientWidth, sideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1, + gapToFooter: Math.round(document.querySelector(".footer").getBoundingClientRect().top - rect.bottom), + pageScrolls: document.documentElement.scrollHeight > document.documentElement.clientHeight + 1, }; }); assert.equal(stage.left, 0, `map stage starts at ${stage.left}px, not the viewport edge`); assert.equal(stage.right, stage.viewport, `map stage ends at ${stage.right}px, not ${stage.viewport}px`); assert.equal(stage.sideways, false, "full-bleed map makes the page scroll sideways"); + // ...and fills the column down to the footer. Capping the height at a + // fraction of the viewport left a dead band that grew with the window. + assert.ok(stage.gapToFooter <= 16, + `${stage.gapToFooter}px of dead space between the map and the footer`); + assert.equal(stage.pageScrolls, false, "the map grew past the viewport"); await page.locator('.tab[data-tab="main"]').click(); assert.equal(new URL(page.url()).pathname, "/");