diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index 3d38895c..a6e484d9 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -1839,11 +1839,17 @@ small { color: var(--text-muted); } font-size: 0.82rem; color: var(--text-muted); } +/* Full-bleed: break the map panel out of the centred .card column so the + stage spans the whole viewport width. The negative inline margins cancel + the card's centring offset plus its side padding, whatever they are. */ #tab-map { display: flex; flex-direction: column; min-height: 0; gap: 0.85rem; + width: 100vw; + max-width: 100vw; + margin-inline: calc(50% - 50vw); } /* map-loading uses the shared .decode-history-overlay .content-overlay classes */ #map-stage { @@ -1851,8 +1857,9 @@ small { color: var(--text-muted); } flex: 0 1 auto; min-height: 0; overflow: hidden; - border-radius: 6px; + border-radius: 0; border: 1px solid color-mix(in srgb, var(--border-light) 78%, transparent); + border-inline: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 86%, transparent), color-mix(in srgb, var(--card-bg) 64%, transparent)), color-mix(in srgb, var(--input-bg) 88%, transparent); 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 766a9400..c0ea07f8 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 @@ -203,6 +203,22 @@ try { await page.locator('.tab[data-tab="map"]').click(); await page.locator("#aprs-map .leaflet-pane").first().waitFor({ state: "attached" }); assert.equal(new URL(page.url()).pathname, "/map"); + + // The map is full-bleed: it breaks out of the centred .card column and + // reaches both viewport edges, without pushing the page sideways. + const stage = await page.evaluate(() => { + const rect = document.getElementById("map-stage").getBoundingClientRect(); + return { + left: Math.round(rect.left), + right: Math.round(rect.right), + viewport: document.documentElement.clientWidth, + sideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 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"); + await page.locator('.tab[data-tab="main"]').click(); assert.equal(new URL(page.url()).pathname, "/");