jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-27 18:10:26 -08:00
parent 39ca0ff9b7
commit 042ae4e34d
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/canvas.html
View File

@ -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");
}