From 997bf190ce65016175e4b03e9d55de31d351ee5a Mon Sep 17 00:00:00 2001
From: efiten <erwin.fiten@gmail.com>
Date: Tue, 21 Apr 2026 07:10:18 +0200
Subject: [PATCH] fix(mobile): close button accessible + toolbar scrollable
 (#797) (#805)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- **Node detail `top: 60px` → `64px`**: aligns with other overlay
panels, gives proper clearance from the 52px fixed nav bar
- **Mobile bottom sheet `z-index: 1050`**: node detail now renders above
the VCR bar (`z-index: 1000`), close button never obscured
- **Mobile `max-height: 60vh` → `60dvh`**: respects iOS Safari browser
chrome correctly
- **`.live-toggles` horizontal scroll**: `overflow-x: auto; flex-wrap:
nowrap` — all 8 checkboxes reachable via horizontal swipe

Fixes #797

## Test plan

- [x] Mobile portrait (<640px): tap a map node → bottom sheet slides up,
close button (✕) visible and tappable above VCR bar
- [x] Mobile portrait: scroll the live-header toggles horizontally → all
checkboxes reachable
- [x] Desktop/tablet (>640px): node detail panel top-right corner fully
below the nav bar
- [x] Desktop: close button functional, panel hides correctly

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/live.css | 21 ++++++++++++++++++---
 public/live.js  | 10 ++++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/public/live.css b/public/live.css
index 7e570e6e..b1664105 100644
--- a/public/live.css
+++ b/public/live.css
@@ -132,7 +132,7 @@
 
 /* ---- Node Detail Panel ---- */
 .live-node-detail {
-  top: 60px;
+  top: 64px;
   right: 12px;
   width: 320px;
   max-height: calc(100vh - 140px);
@@ -325,11 +325,14 @@
   }
   .live-stats-row { flex-wrap: wrap; gap: 4px; }
   .live-stat-pill { font-size: 11px; padding: 2px 7px; }
-  .live-toggles { font-size: 10px; gap: 6px; margin-left: 0; }
+  .live-toggles { font-size: 10px; gap: 6px; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; width: 100%; min-width: 0; }
   .live-title { font-size: 12px; letter-spacing: 1px; }
   /* #203 — bottom-sheet node detail on mobile */
-  .live-node-detail { width: 100%; right: 0; left: 0; top: auto; bottom: 0; max-height: 60vh; border-radius: 16px 16px 0 0; overflow-y: auto; }
+  .live-node-detail { width: 100%; right: 0; left: 0; top: auto; bottom: 0; max-height: 60dvh; border-radius: 16px 16px 0 0; overflow-y: auto; z-index: 1050; }
   .live-node-detail.hidden { transform: translateY(100%); }
+  /* Close button was unreachable: panel-header collapsed to 8px on mobile, panel-content
+     scroll area started at y=8, overlapping the button's 36px tap target (y=6–42) */
+  .live-node-detail .panel-header { min-height: 44px; }
   .feed-detail-card {
     position: fixed !important;
     right: 0 !important;
@@ -689,6 +692,18 @@
 .live-feed { bottom: 68px; }
 .feed-show-btn { bottom: 68px !important; }
 
+/* Backdrop for mobile tap-outside-to-close (#797) */
+.node-detail-backdrop {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 1049;
+  background: rgba(0, 0, 0, 0.25);
+}
+@media (max-width: 640px) {
+  .node-detail-backdrop.active { display: block; }
+}
+
 /* Mobile VCR */
 @media (max-width: 640px) {
   /* Mobile VCR: two-row stacked layout */
diff --git a/public/live.js b/public/live.js
index 0819c51d..c9391cf8 100644
--- a/public/live.js
+++ b/public/live.js
@@ -849,6 +849,7 @@
           <div class="panel-content" aria-live="polite" aria-relevant="additions" role="log"></div>
         </div>
         <button class="feed-show-btn hidden" id="feedShowBtn" title="Show feed">📋</button>
+        <div id="nodeDetailBackdrop" class="node-detail-backdrop"></div>
         <div class="live-overlay live-node-detail hidden" id="liveNodeDetail">
           <div class="panel-header">
             <button class="panel-corner-btn" data-panel="liveNodeDetail" title="Move panel to next corner" aria-label="Move panel to next corner">◫</button>
@@ -1216,10 +1217,14 @@
     // Node detail panel
     const nodeDetailPanel = document.getElementById('liveNodeDetail');
     const nodeDetailContent = document.getElementById('nodeDetailContent');
-    document.getElementById('nodeDetailClose').addEventListener('click', () => {
+    const nodeDetailBackdrop = document.getElementById('nodeDetailBackdrop');
+    function closeNodeDetail() {
       activeNodeDetailKey = null;
       nodeDetailPanel.classList.add('hidden');
-    });
+      nodeDetailBackdrop.classList.remove('active');
+    }
+    document.getElementById('nodeDetailClose').addEventListener('click', closeNodeDetail);
+    nodeDetailBackdrop.addEventListener('click', closeNodeDetail);
 
     // Feed panel resize handle (#27)
     const savedFeedWidth = localStorage.getItem('live-feed-width');
@@ -1451,6 +1456,7 @@
     const panel = document.getElementById('liveNodeDetail');
     const content = document.getElementById('nodeDetailContent');
     panel.classList.remove('hidden');
+    document.getElementById('nodeDetailBackdrop').classList.add('active');
     content.innerHTML = '<div style="padding:20px;color:var(--text-muted)">Loading…</div>';
     try {
       const [data, healthData] = await Promise.all([