From 709939f60b51096f7fcbfdf44edc1f5eff061439 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Mon, 3 Aug 2026 20:36:50 +0200
Subject: [PATCH] [feat](trx-frontend-http): span the map across the full
 viewport width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The map stage broke out of the centred .card column: negative inline
margins cancel the card's centring offset and its side padding, so the
stage reaches both viewport edges at every width without hardcoding
either value.  Its rounded corners and left/right borders go with it —
edge to edge, the panel reads as a band rather than a floating card.

The browser smoke test now measures the stage against the viewport, and
checks that the full-bleed width does not push the page sideways.

Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/style.css       |  9 ++++++++-
 .../frontend/tests/browser-smoke.mjs             | 16 ++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

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, "/");