diff --git a/website/canvas.html b/website/canvas.html
index 23705f8..d0e5e69 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -1805,25 +1805,9 @@
}
@media (max-width: 768px) {
- /* FAB toggle button */
+ /* Hide FAB — toolbar now uses collapse like desktop */
#mobile-menu {
- display: flex;
- position: fixed;
- bottom: 24px;
- right: 16px;
- width: 56px;
- height: 56px;
- border: none;
- border-radius: 50%;
- background: #14b8a6;
- color: white;
- font-size: 28px;
- align-items: center;
- justify-content: center;
- z-index: 1002;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
- cursor: pointer;
- touch-action: manipulation;
+ display: none;
}
/* Hide old mobile zoom — replaced by #canvas-corner-tools */
@@ -1831,37 +1815,39 @@
display: none;
}
- /* Hide desktop toolbar, show as column overlay when toggled */
+ /* Mobile toolbar: compact column on left, icons only, same as desktop */
#toolbar {
- display: none;
position: fixed;
- top: 72px;
- left: 8px;
- right: 8px;
- flex-wrap: wrap;
- max-height: calc(100vh - 160px);
- overflow-y: auto;
- gap: 6px;
- padding: 12px;
- border-radius: 16px;
+ top: auto;
+ bottom: 60px; /* above bottom-toolbar row */
+ left: 6px;
+ right: auto;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: 2px;
+ padding: 4px;
+ border-radius: 12px;
z-index: 1001;
+ max-height: calc(100vh - 140px);
+ overflow-y: auto;
+ overflow-x: visible;
+ scrollbar-width: none;
}
- #toolbar.mobile-open {
- display: flex;
- }
+ #toolbar::-webkit-scrollbar { display: none; }
- /* On mobile, icon grid — tap to open panel */
+ /* On mobile, icon-only buttons */
#toolbar .toolbar-group {
width: auto;
}
#toolbar .toolbar-group-toggle {
- width: 48px;
- height: 48px;
- max-width: 48px;
+ width: 40px;
+ height: 40px;
+ max-width: 40px;
padding: 0;
- font-size: 20px;
+ font-size: 18px;
overflow: hidden;
justify-content: center;
}
@@ -1874,7 +1860,7 @@
/* Don't expand on hover on mobile */
#toolbar .toolbar-group:hover > .toolbar-group-toggle,
#toolbar .toolbar-group.open > .toolbar-group-toggle {
- max-width: 48px;
+ max-width: 40px;
padding: 0;
justify-content: center;
}
@@ -1883,12 +1869,27 @@
display: none !important;
}
- #toolbar > button {
- width: 48px;
- height: 48px;
+ /* Show collapse button on mobile — same behavior as desktop */
+ #toolbar #toolbar-collapse {
+ display: flex;
+ width: 40px;
+ height: 32px;
padding: 0;
- font-size: 20px;
- min-height: 48px;
+ }
+
+ /* Collapsed state on mobile */
+ #toolbar.collapsed {
+ padding: 4px;
+ bottom: 60px;
+ overflow: visible;
+ }
+
+ #toolbar > button:not(#toolbar-collapse) {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ font-size: 18px;
+ min-height: 40px;
text-align: center;
justify-content: center;
}
@@ -1897,11 +1898,6 @@
display: none;
}
- /* Hide collapse on mobile */
- #toolbar #toolbar-collapse {
- display: none;
- }
-
#community-info {
display: none;
}
@@ -1910,27 +1906,30 @@
max-width: calc(100vw - 32px);
}
- /* Mobile: panel slides up from bottom as sheet */
+ /* Mobile: panel opens to the right of the toolbar */
#toolbar-panel {
top: auto;
- bottom: 90px;
- left: 8px;
- right: 8px;
- border-radius: 16px;
+ bottom: 60px;
+ left: 56px;
+ right: auto;
+ min-width: 180px;
+ border-radius: 12px;
max-height: 50vh;
}
#toolbar-panel-body button {
- padding: 14px 16px;
- font-size: 16px;
- min-height: 48px;
+ padding: 12px 14px;
+ font-size: 15px;
+ min-height: 44px;
}
- /* Bottom toolbar: compact on mobile */
+ /* Bottom toolbar: raised above corner tools row */
#bottom-toolbar {
bottom: 8px;
padding: 4px 6px;
gap: 1px;
+ left: 56px; /* offset right of side toolbar */
+ transform: translateX(0);
}
#bottom-toolbar .tool-btn {
@@ -1942,17 +1941,18 @@
margin: 0 2px;
}
- /* Corner tools: horizontal on mobile, 44px touch targets */
+ /* Corner tools: horizontal on mobile, tucked bottom-right */
#canvas-corner-tools {
bottom: 8px;
- left: 8px;
+ left: auto;
+ right: 8px;
flex-direction: row;
padding: 4px 6px;
}
#canvas-corner-tools .corner-btn {
- width: 44px;
- height: 44px;
+ width: 40px;
+ height: 40px;
}
#canvas-corner-tools .corner-sep {
@@ -6065,27 +6065,37 @@
updateCanvasTransform();
});
- // Mobile toolbar toggle
+ // Mobile toolbar toggle — collapse behavior same as desktop
const mobileMenuBtn = document.getElementById("mobile-menu");
const toolbarEl = document.getElementById("toolbar");
+ // FAB is hidden on mobile; toolbar uses collapse button like desktop.
+ // Keep FAB handler as fallback.
mobileMenuBtn.addEventListener("click", () => {
- const isOpen = toolbarEl.classList.toggle("mobile-open");
- mobileMenuBtn.textContent = isOpen ? "✕" : "✚";
- if (!isOpen && typeof closeToolbarPanel === "function") closeToolbarPanel();
+ const isCollapsed = toolbarEl.classList.contains("collapsed");
+ if (isCollapsed) {
+ toolbarEl.classList.remove("collapsed");
+ collapseBtn.innerHTML = minimizeSVG;
+ collapseBtn.title = "Minimize toolbar";
+ } else {
+ toolbarEl.classList.add("collapsed");
+ collapseBtn.innerHTML = wrenchSVG;
+ collapseBtn.title = "Expand toolbar";
+ }
});
- // Auto-close toolbar after tapping a shape-creation button on mobile
+ // Auto-collapse toolbar after tapping a shape-creation button on mobile
toolbarEl.addEventListener("click", (e) => {
if (window.innerWidth > 768) return;
const btn = e.target.closest("button");
if (!btn) return;
- // Keep open for connect, memory, group toggles, collapse, whiteboard tools
const keepOpen = ["toggle-theme", "toolbar-collapse"];
if (btn.classList.contains("toolbar-group-toggle")) return;
if (!keepOpen.includes(btn.id)) {
- toolbarEl.classList.remove("mobile-open");
- mobileMenuBtn.textContent = "✚";
+ toolbarEl.classList.add("collapsed");
+ collapseBtn.innerHTML = wrenchSVG;
+ collapseBtn.title = "Expand toolbar";
+ if (typeof closeToolbarPanel === "function") closeToolbarPanel();
}
});