fix(live): keep legend toggle above VCR bar

.github/workflows/deploy.yml

@@ -156,6 +156,7 @@ jobs:
           node test-node-reach-coverage.js
           node test-reach-rank.js
           node test-issue-1107-live-layout.js
+          node test-issue-1833-legend-toggle-vcr-offset.js
           node test-issue-1532-live-fullscreen.js
           node test-issue-1619-feed-detail-card-draggable.js
           node test-xss-escape-sinks.js
@@ -471,6 +472,7 @@ jobs:
           CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-issue-1204-live-panel-structure-e2e.js 2>&1 | tee -a e2e-output.txt
           CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-issue-1234-live-chrome-pass2-e2e.js 2>&1 | tee -a e2e-output.txt
           CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-issue-1206-vcr-overlap-e2e.js 2>&1 | tee -a e2e-output.txt
+          CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-issue-1833-legend-toggle-clickable-e2e.js 2>&1 | tee -a e2e-output.txt
           CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-issue-1244-live-vcr-row-hints-e2e.js 2>&1 | tee -a e2e-output.txt
           CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-issue-1510-live-nav-pin-e2e.js 2>&1 | tee -a e2e-output.txt
           CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-live-fullscreen-1572-e2e.js 2>&1 | tee -a e2e-output.txt

public/live.css

@@ -906,16 +906,28 @@ body.live-fullscreen #liveFullscreenToggle:hover,
 .feed-hide-btn:hover { opacity: 1; color: #fff; background: rgba(239,68,68,0.6); }
 
 .feed-show-btn {
-  /* #1107: pin fixed bottom-right (stacked above legend toggle) so the
+  /* #1107: pin bottom-right (stacked above legend toggle) so the
    * activate/hide button group docks together as a tidy cluster.
-   * bottom uses max() to clear the VCR bar when present (#1206). */
+   * bottom uses max() to clear the VCR bar when present (#1206).
+   * #1833 round 2: use the same .live-page containing block as .vcr-bar.
+   * A viewport-fixed anchor drifts by --bottom-nav-reserve at 641..768px.
+   * #1833 round 3: at short viewport heights the stacked-above-legend
+   * offset can rise far enough to land under .top-nav (.live-page sits at
+   * viewport-top, with .top-nav fixed on top of it, not pushing it down —
+   * so "bottom" offsets big enough reach right into the nav's 52px band).
+   * The old margin-bottom stacking trick is folded into bottom below so
+   * there is a single total offset to clamp; its ceiling keeps the
+   * button's top edge at least .top-nav's height below .live-page's own
+   * top edge, regardless of viewport height. min() only ever pulls the
+   * offset DOWN from its VCR-bar-clearing value, so it cannot reintroduce
+   * the VCR-bar overlap this same rule already prevents. */
   --legend-toggle-stack: calc(var(--legend-toggle-h, 46px) + 10px); /* gap above legend-toggle */
-  position: fixed;
-  bottom: max(1rem, calc(var(--vcr-bar-height, 0px) + 10px + var(--legend-toggle-stack)));
+  position: absolute;
+  bottom: max(1rem, min(
+    calc(max(1rem, calc(var(--vcr-bar-height, 0px) + 10px + var(--legend-toggle-stack))) + var(--legend-toggle-stack)),
+    calc(100% - var(--legend-toggle-h, 46px) - 52px - 10px)
+  ));
   right: 1rem; z-index: 500;
-  /* Stack above .legend-toggle-btn using margin-bottom so the `right: 1rem`
-   * invariant (and bottom-right anchor) stays consistent across both buttons. */
-  margin-bottom: var(--legend-toggle-stack);
   background: color-mix(in srgb, var(--surface-1) 92%, transparent); backdrop-filter: blur(8px);
   border: 1px solid var(--border); border-radius: 8px;
   color: var(--text-muted); font-size: 18px; padding: 8px 10px;
@@ -1316,11 +1328,13 @@ input.live-node-filter-input:focus {
 }
 
 /* Legend toggle button — visible at all sizes (#60, #279).
- * #1107: pinned fixed bottom-right so the activate/hide button group
+ * #1107: pinned bottom-right so the activate/hide button group
  * docks consistently (with .feed-show-btn) instead of floating loose
- * inside the map container. */
+ * inside the map container.
+ * #1833 round 2: anchor to .live-page, like .vcr-bar, so the mobile bottom
+ * navigation reserve cannot move this button underneath the VCR bar. */
 .legend-toggle-btn {
-  position: fixed;
+  position: absolute;
   bottom: calc(var(--vcr-bar-height, 58px) + 10px);
   right: 1rem;
   z-index: 500;

test-all.sh

@@ -82,6 +82,7 @@ node test-issue-1461-mobile-page-actions.js
 node test-issue-1470-node-tile-helper.js
 node test-issue-1485-live-anim-z.js
 node test-issue-1532-live-fullscreen.js
+node test-issue-1833-legend-toggle-vcr-offset.js
 node test-naive-banner-tone.js
 node test-issue-1473-reserved-prefixes.js
 node test-issue-1473-prefix-generator.js

test-issue-1107-live-layout.js

@@ -7,8 +7,12 @@
  *      with a `max-width` cap so it doesn't dominate the map.
  *   2. The activate/hide toggle button group at the bottom of the map
  *      (`.legend-toggle-btn`, `.feed-show-btn`) must be pinned via
- *      `position: fixed; bottom: 1rem; right: 1rem` so they dock as one
+ *      `position: absolute; bottom: 1rem; right: 1rem` so they dock as one
  *      tidy bottom-right group instead of being scattered/cramped.
+ *      (#1833 round 2 changed the anchor from `fixed` to `absolute`: the
+ *      group must resolve its offsets against .live-page, the same box as
+ *      .vcr-bar, or it drifts into the bar by --bottom-nav-reserve at
+ *      641..768px and stops taking clicks.)
  *   3. Theming uses existing CSS variables only — no new hex colors.
  *
  * Source-invariant assertions on public/live.css, same approach as
@@ -86,8 +90,8 @@ assert(legendBtn != null, '.legend-toggle-btn rule block found');
 
 if (legendBtn) {
   assert(
-    /position\s*:\s*fixed/.test(legendBtn),
-    '.legend-toggle-btn uses position: fixed (pinned to viewport)'
+    /position\s*:\s*absolute/.test(legendBtn),
+    '.legend-toggle-btn uses position: absolute (docked to .live-page, #1833 round 2)'
   );
   assert(
     /bottom\s*:\s*(1rem|max\(1rem|calc\(\s*var\(--vcr-bar-height)/.test(legendBtn),
@@ -104,8 +108,8 @@ assert(feedShowBtn != null, '.feed-show-btn rule block found');
 
 if (feedShowBtn) {
   assert(
-    /position\s*:\s*fixed/.test(feedShowBtn),
-    '.feed-show-btn uses position: fixed (pinned to viewport)'
+    /position\s*:\s*absolute/.test(feedShowBtn),
+    '.feed-show-btn uses position: absolute (docked to .live-page, #1833 round 2)'
   );
   assert(
     /bottom\s*:\s*(1rem|max\(1rem)/.test(feedShowBtn),