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 */