From bb48922b687ea1352f8ceb1b60dd61fe31b0e6e6 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 2 Jun 2026 15:09:21 -0400
Subject: [PATCH] center Back-to-Deck bar over the canvas column, not the
viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
position:fixed pinned the bar to the viewport center which drifted
over the sidebar header on wide layouts. Move the bar into a new
.canvasOverlayBars wrapper that shares grid-area: canvas with
#previewShell — the overlay is pointer-events:none with the bar
flipped back to pointer-events:auto. The bar is positioned absolute
within the overlay so it hovers over the canvas grid column without
being a child of the scrolling preview shell.
---
src/index.html | 34 ++++++++++++++++++++++------------
1 file changed, 22 insertions(+), 12 deletions(-)
diff --git a/src/index.html b/src/index.html
index 7ba7517..1b49fac 100644
--- a/src/index.html
+++ b/src/index.html
@@ -768,14 +768,22 @@
cursor: pointer; font-size: .8rem; padding: 2px 6px; line-height: 1.1;
}
.deckSlideActions button:hover { background: #f1f5f9; }
+ /* Overlay wrapper occupies the canvas grid column. The deck
+ edit bar inside is absolutely positioned to its top-center,
+ so it hovers over the canvas-host (#previewShell) without
+ being a child of it — panning / zooming the canvas doesn't
+ drag it along, and it stays centred on the canvas column
+ rather than the viewport. */
+ .canvasOverlayBars {
+ grid-area: canvas;
+ position: relative;
+ pointer-events: none;
+ z-index: 60;
+ }
+ .canvasOverlayBars > * { pointer-events: auto; }
#deckEditBar {
- /* Pinned to the viewport so panning / zooming the canvas
- doesn't drag the bar along. The bar still visually sits over
- the canvas area because the sidebar is on the left — top:10px
- + left:50% lands roughly centred over the canvas at common
- widths. */
- position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
- z-index: 60; align-items: center; gap: 10px;
+ position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
+ align-items: center; gap: 10px;
background: var(--panel, #fff); border: 1px solid var(--line);
border-radius: 999px; padding: 5px 14px 5px 8px;
box-shadow: 0 6px 20px rgba(15,23,42,.18); font-size: .82rem;
@@ -3989,11 +3997,6 @@
-