From 0645628fb6d533d41932441ceef8b5c1d54786ea Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 9 Mar 2026 20:25:14 -0700
Subject: [PATCH] fix(canvas): mobile toolbar uses icon grid, tap to open panel

- Mobile toolbar shows compact 48x48 icon grid instead of full-width rows
- Labels hidden on mobile, title shown in popout panel header
- Separators hidden on mobile to save space
- Tap icon to open bottom-sheet panel with title + sub-tools

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 website/canvas.html | 65 +++++++++++++++++++--------------------------
 1 file changed, 28 insertions(+), 37 deletions(-)

diff --git a/website/canvas.html b/website/canvas.html
index a82891f..27fd34f 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -1565,59 +1565,50 @@
 					display: flex;
 				}
 
-				/* On mobile, flatten groups */
+				/* On mobile, icon grid — tap to open panel */
 				#toolbar .toolbar-group {
-					width: 100%;
+					width: auto;
 				}
 
 				#toolbar .toolbar-group-toggle {
-					width: 100%;
-					max-width: none;
-					text-align: left;
-					padding: 14px 16px;
-					font-size: 16px;
-					min-height: 48px;
-					height: auto;
-					overflow: visible;
-					justify-content: flex-start;
+					width: 48px;
+					height: 48px;
+					max-width: 48px;
+					padding: 0;
+					font-size: 20px;
+					overflow: hidden;
+					justify-content: center;
 				}
-				/* Show group name on mobile */
+
+				/* Hide label on mobile — title shows in panel header */
 				#toolbar .toolbar-group-toggle .tg-label {
-					display: inline;
-					font-size: 15px;
-				}
-				#toolbar .toolbar-group-toggle {
-					max-width: none;
-					padding-left: 10px;
-					padding-right: 10px;
-					justify-content: flex-start;
+					display: none !important;
 				}
 
-				#toolbar .toolbar-dropdown {
-					position: static;
-					box-shadow: none;
-					padding: 4px 0 4px 12px;
-					min-width: 0;
+				/* Don't expand on hover on mobile */
+				#toolbar .toolbar-group:hover > .toolbar-group-toggle,
+				#toolbar .toolbar-group.open > .toolbar-group-toggle {
+					max-width: 48px;
+					padding: 0;
+					justify-content: center;
 				}
-
-				#toolbar .toolbar-dropdown button {
-					padding: 14px 16px;
-					font-size: 16px;
-					min-height: 48px;
+				#toolbar .toolbar-group:hover > .toolbar-group-toggle .tg-label,
+				#toolbar .toolbar-group.open > .toolbar-group-toggle .tg-label {
+					display: none !important;
 				}
 
 				#toolbar > button {
-					width: 100%;
-					text-align: left;
-					padding: 14px 16px;
+					width: 48px;
+					height: 48px;
+					padding: 0;
+					font-size: 20px;
 					min-height: 48px;
-					font-size: 16px;
+					text-align: center;
+					justify-content: center;
 				}
 
 				#toolbar .toolbar-sep {
-					width: 100%;
-					height: 1px;
-					margin: 4px 0;
+					display: none;
 				}
 
 				/* Hide collapse on mobile */