diff --git a/website/canvas.html b/website/canvas.html
index 01a14203..c956617f 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -6923,16 +6923,35 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
 				group.classList.add("open");
 				activeToolbarGroup = group;
 
-				// Position panel above the clicked toolbar group
+				// Position panel beside 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";
+				const isMobile = window.innerWidth <= 768;
+				if (isMobile) {
+					// Mobile: toolbar is on right, panel opens to the left
+					toolbarPanel.style.left = "";
+					toolbarPanel.style.right = (window.innerWidth - tRect.left + 6) + "px";
+				} else {
+					// Desktop: toolbar is on left, panel opens to the right
+					toolbarPanel.style.left = (tRect.right + 6) + "px";
+					toolbarPanel.style.right = "";
+				}
+				// Show panel first so we can measure its height
+				toolbarPanel.style.bottom = "auto";
+				toolbarPanel.style.top = "0";
 				toolbarPanel.classList.add("panel-open");
+				// Align panel top with clicked group, clamped to viewport
+				const panelH = toolbarPanel.offsetHeight || 200;
+				const maxTop = window.innerHeight - panelH - 8;
+				toolbarPanel.style.top = Math.max(8, Math.min(gRect.top, maxTop)) + "px";
 			}
 
 			function closeToolbarPanel() {
 				toolbarPanel.classList.remove("panel-open");
+				toolbarPanel.style.left = "";
+				toolbarPanel.style.right = "";
+				toolbarPanel.style.top = "";
+				toolbarPanel.style.bottom = "";
 				toolbarEl.querySelectorAll(".toolbar-group").forEach(g => g.classList.remove("open"));
 				activeToolbarGroup = null;
 			}