Keep node inspector popups above live packet effects (#11)

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.4.1 - 2026-09-12
+
+- Keep desktop node details above live packet trails and map shading so traffic cannot obscure the card. Preserve the toolbar and phone sheet layer order.
+- Add a synthetic browser regression that checks the inspector against the actual packet canvas, including when the canvas normally ignores pointer events.
+
 ## 0.4.0 - 2026-09-11
 
 - Expand live packet sounds from 3 to 30 voices: keys, mallets, plucked strings, bells, synths, sonar-like pings and percussion.

VERSION

@@ -1 +1 @@
-0.4.0
+0.4.1

web/e2e/visual-smoke.spec.ts

@@ -482,6 +482,25 @@ test('focuses recent route neighbors and clears selection on the map', async ({
   const inspector = mobile ? page.locator('#node-inspector-sheet') : page.locator('.node-inspector-popup');
   await expect(inspector).toBeVisible();
   await expect(inspector).toContainText('Alpha');
+  // The traffic canvas normally ignores pointer hits, which can hide a paint-order bug.
+  // Include it in hit testing for one synchronous probe, then restore normal input behavior.
+  await expect(page.locator('#packet-canvas')).toHaveCSS('pointer-events', 'none');
+  const inspectorAboveTraffic = await inspector.evaluate((panel) => {
+    const traffic = document.getElementById('packet-canvas')!;
+    const previous = traffic.style.pointerEvents;
+    const bounds = panel.getBoundingClientRect();
+    traffic.style.pointerEvents = 'auto';
+    try {
+      return panel.contains(document.elementFromPoint(
+        bounds.left + bounds.width / 2,
+        bounds.top + bounds.height / 2,
+      ));
+    } finally {
+      traffic.style.pointerEvents = previous;
+    }
+  });
+  expect(inspectorAboveTraffic, 'node details must paint above live packet graphics').toBe(true);
+  await expect(page.locator('#packet-canvas')).toHaveCSS('pointer-events', 'none');
   await expect(inspector.locator('.neighbor-row')).toHaveCount(1);
   await expect(inspector.locator('.neighbor-row').first()).toContainText('Bravo');
   await expect(map).toHaveAttribute('data-neighbor-route-count', '1');

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cartolite-server-web",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cartolite-server-web",
-      "version": "0.4.0",
+      "version": "0.4.1",
       "dependencies": {
         "maplibre-gl": "6.4.1"
       },

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cartolite-server-web",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "type": "module",
   "scripts": {

web/src/styles.css

@@ -406,6 +406,8 @@ button { font: inherit; }
 .tooltip[hidden] { display: none; }
 
 
+/* Raise the popup wrapper's stacking context above traffic (4), below controls (8). */
+.node-inspector-popup { z-index: 7; }
 .node-inspector-popup .maplibregl-popup-content {
   overflow: hidden;
   border: 1px solid rgba(123, 205, 209, 0.22);