From 4bccdaa1d4c8b1d23320e9b968ef83d8b7ec19e5 Mon Sep 17 00:00:00 2001
From: n30nex <blushellneon@outlook.com>
Date: Sat, 12 Sep 2026 17:39:50 -0400
Subject: [PATCH] Keep the region and packet legends separate on compact
 screens

---
 web/e2e/display-upgrade.spec.ts | 7 +++++++
 web/src/display.css             | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/e2e/display-upgrade.spec.ts b/web/e2e/display-upgrade.spec.ts
index 45a6c74..363274e 100644
--- a/web/e2e/display-upgrade.spec.ts
+++ b/web/e2e/display-upgrade.spec.ts
@@ -93,6 +93,13 @@ test('shows matching region colors in a viewport legend only when Regions is ena
   await expect(page.locator('.region-legend-list > span').first()).toBeVisible();
   const colors = await page.locator('.region-legend-list i').evaluateAll((items) => items.map((item) => getComputedStyle(item).backgroundColor));
   expect(colors.every((color) => color !== 'rgba(0, 0, 0, 0)')).toBe(true);
+  const regionBounds = await page.locator('.region-legend-list').boundingBox();
+  const packetBounds = await page.locator('#route-legend').boundingBox();
+  if (regionBounds && packetBounds) {
+    const overlap = Math.max(0, Math.min(regionBounds.x + regionBounds.width, packetBounds.x + packetBounds.width) - Math.max(regionBounds.x, packetBounds.x))
+      * Math.max(0, Math.min(regionBounds.y + regionBounds.height, packetBounds.y + packetBounds.height) - Math.max(regionBounds.y, packetBounds.y));
+    expect(overlap, 'packet and region legends must not cover each other').toBe(0);
+  }
   await page.screenshot({ path: info.outputPath('region-colors-legend.png') });
   await openMapOptions(page);
   await page.locator('#regions-button').click();
diff --git a/web/src/display.css b/web/src/display.css
index 5497a52..c9a009e 100644
--- a/web/src/display.css
+++ b/web/src/display.css
@@ -32,7 +32,8 @@
 #map .maplibregl-ctrl-attrib { color: var(--muted); background: var(--panel-solid); opacity: 1; font-size: 10px; }
 #map .maplibregl-ctrl-attrib a { color: var(--ink); }
 :root[data-theme="light"] .route-legend, :root[data-theme="light"] .route-legend-label { color: var(--ink); }
-:root[data-view-class="mobile"] #app:has(.region-legend:not([hidden])) .route-legend { bottom: max(66px, calc(env(safe-area-inset-bottom) + 62px)); }
+:root[data-view-class="mobile"] #app:has(.region-legend:not([hidden])) .route-legend { top: max(112px, calc(env(safe-area-inset-top) + 104px)); bottom: auto; }
+@media (orientation: landscape) and (max-height: 520px) { :root[data-view-class="mobile"] #app:has(.region-legend:not([hidden])) .route-legend { top: max(62px, calc(env(safe-area-inset-top) + 54px)); } }
 :root[data-theme="dark"] #map .maplibregl-ctrl-attrib-button { filter: invert(1); }
 .netgraph-app .packet-legend i[data-kind] { background: var(--route-color); box-shadow: none; }
 .route-legend-swatch, .netgraph-app .packet-legend i[data-kind]:not([data-kind="inter-area"]) { position: relative; width: 18px; height: 10px; background: var(--scene-background) !important; border: 1px solid var(--panel-border); border-radius: 3px; box-shadow: none; }