From 042ae4e34dd0ab3cc22dccca05a21e0a1d1cf507 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Fri, 27 Feb 2026 18:10:26 -0800 Subject: [PATCH] fix: dynamically position toolbar popout panel to avoid overlap The panel had a hardcoded left offset (88px) that didn't account for the toolbar's actual width, causing the submenu to overlap the toolbar. Now uses getBoundingClientRect() to position 8px right of the toolbar edge. Skipped on mobile where the panel uses its own bottom-sheet layout. Co-Authored-By: Claude Opus 4.6 --- website/canvas.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/website/canvas.html b/website/canvas.html index 5a2d511..3b1706a 100644 --- a/website/canvas.html +++ b/website/canvas.html @@ -117,7 +117,7 @@ #toolbar-panel { position: fixed; top: 108px; - left: calc(68px + 12px + 8px); + /* left is set dynamically by openToolbarPanel() */ min-width: 180px; max-height: calc(100vh - 130px); background: white; @@ -2744,6 +2744,12 @@ toolbarEl.querySelectorAll(".toolbar-group").forEach(g => g.classList.remove("open")); group.classList.add("open"); activeToolbarGroup = group; + + // Position panel to the right of toolbar (no overlap) — desktop only + if (window.innerWidth > 768) { + const toolbarRect = toolbarEl.getBoundingClientRect(); + toolbarPanel.style.left = (toolbarRect.right + 8) + "px"; + } toolbarPanel.classList.add("panel-open"); }