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

fix: move shape-add toolbar next to bottom toolbar instead of bottom-right corner 

Repositions the vertical shape-add toolbar (Write, Embed, AI, etc.) from
the fixed bottom-right corner to sit immediately right of the centered
bottom drawing toolbar. Prevents overlap with the bug report button.
JS dynamically positions on load/resize; mobile retains bottom-right.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-10 23:21:33 -04:00
parent e6328581a7
commit c2c0dadebe
1 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
website/canvas.html
View File

@ -43,10 +43,8 @@
#toolbar {
position: fixed;
top: auto;
bottom: 16px;
left: auto;
right: 12px;
left: calc(50% + 280px);
display: flex;
flex-direction: column;
align-items: flex-start;
@ -58,6 +56,7 @@
z-index: 1000;
max-height: calc(100vh - 130px);
overflow: visible;
/* left is refined by JS to sit right of #bottom-toolbar */
}
/* Dropdown group container */
@ -214,13 +213,10 @@
padding: 16px; text-align: center; color: rgba(255,255,255,0.4); font-size: 13px;
}
/* Popout panel — renders group tools to the left of toolbar */
/* Popout panel — renders group tools above the toolbar */
#toolbar-panel {
position: fixed;
top: auto;
bottom: 60px;
left: auto !important;
right: 56px;
min-width: 180px;
max-height: calc(100vh - 130px);
background: var(--rs-toolbar-panel-bg);
@ -229,6 +225,7 @@
z-index: 1001;
display: none;
flex-direction: column;
/* left is set by JS to align with #toolbar */
}
#toolbar-panel.panel-open {
@ -1669,9 +1666,10 @@
display: none;
}
/* Mobile toolbar: tighter spacing, scrollable */
/* Mobile toolbar: tighter spacing, scrollable, pinned to right edge */
#toolbar {
bottom: 8px;
left: auto !important;
right: 6px;
align-items: center;
gap: 2px;
@ -6881,8 +6879,11 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
group.classList.add("open");
activeToolbarGroup = group;
// Position panel to the left of toolbar (no overlap)
// CSS handles positioning via right: 56px; left: auto !important
// Position panel above the clicked toolbar group
const tRect = toolbarEl.getBoundingClientRect();
const gRect = group.getBoundingClientRect();
toolbarPanel.style.left = gRect.left + "px";
toolbarPanel.style.bottom = (window.innerHeight - tRect.top + 6) + "px";
toolbarPanel.classList.add("panel-open");
}
@ -6927,6 +6928,18 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
collapseBtn.innerHTML = wrenchSVG;
collapseBtn.title = "Expand toolbar";
// Position #toolbar to the right of #bottom-toolbar
const bottomBarEl = document.getElementById("bottom-toolbar");
function positionToolbar() {
if (!bottomBarEl || !toolbarEl) return;
const btRect = bottomBarEl.getBoundingClientRect();
toolbarEl.style.left = (btRect.right + 6) + "px";
}
positionToolbar();
window.addEventListener("resize", positionToolbar);
// Re-position after fonts/layout settle
requestAnimationFrame(positionToolbar);
// Mobile zoom controls (separate from toolbar)
document.getElementById("mz-in").addEventListener("click", () => {
scale = Math.min(scale * 1.1, maxScale);