From 44721b579c101d35ec3fb19d6bc089e57e65ceb5 Mon Sep 17 00:00:00 2001 From: Stan Grams Date: Mon, 3 Aug 2026 20:50:48 +0200 Subject: [PATCH] [fix](trx-frontend-http): fill the map column down to the footer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The windowed map was capped at 75% of the viewport height and at a width-derived aspect ratio, which left a dead band under it: 69px at 1600x950, and on a 420px-wide phone a 270px map on an 800px screen. Neither cap was doing useful work now that the stage spans the full width, so the map fills the column down to the footer instead. Growing into the footer needs a bound: once the column is tall enough to push the footer below the fold, using its position would push it further on every pass, so the bottom edge is clamped to the viewport. Growth then consumes the column's spare height and settles in one pass. Also drops three mapIsFullscreen() branches in the windowed path that could never be taken — the fullscreen case returns above them. Signed-off-by: Stan Grams --- .../assets/web/generated/map-core.js | 13 ++++------ .../frontend/src/map-core.ts | 24 +++++++++---------- .../frontend/tests/browser-smoke.mjs | 7 ++++++ 3 files changed, 22 insertions(+), 22 deletions(-) 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, "/");