From dc5dfcccc8b69992edd1aaa1727282fb26ff7c4b Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Tue, 14 Apr 2026 16:38:05 -0400 Subject: [PATCH] fix(canvas): position toolbar sub-menus beside toolbar instead of on top Panel now opens to the right of the vertical toolbar (desktop) or left (mobile), aligned vertically with the clicked group. Co-Authored-By: Claude Opus 4.6 --- website/canvas.html | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) 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; }