From c2c0dadebe893968370e1c7c2133b06d3cd266c5 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 10 Apr 2026 23:21:33 -0400
Subject: [PATCH] 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>
---
 website/canvas.html | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/website/canvas.html b/website/canvas.html
index 7e504cd0..64d93e6f 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -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);