From fb69b41da6854ffea8668dc2b062fccdc0b92fec Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Mon, 9 Mar 2026 20:22:10 -0700 Subject: [PATCH] fix(canvas): toolbar icons show title label on hover/open and in panel header - Add tg-icon + tg-label spans inside toolbar group toggle buttons - Label hidden by default, revealed on hover/open via CSS - Panel header uses title attribute instead of emoji-only textContent - Plus menu headings also use title attribute for group names - Mobile: labels always visible alongside icons Co-Authored-By: Claude Opus 4.6 --- website/canvas.html | 59 ++++++++++++++++++++++++++++++++------------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/website/canvas.html b/website/canvas.html index 69e8be5..a82891f 100644 --- a/website/canvas.html +++ b/website/canvas.html @@ -241,6 +241,19 @@ color: white; } + /* Icon + label structure inside toggle */ + .tg-icon { + flex-shrink: 0; + font-size: 18px; + line-height: 1; + } + .tg-label { + display: none; + font-size: 12px; + font-weight: 600; + white-space: nowrap; + } + /* Icon-only toolbar: show only emoji, fluid expand on hover/open */ .toolbar-group-toggle { max-width: 42px; @@ -251,15 +264,22 @@ padding-right: 0; position: relative; transition: max-width 0.25s ease, padding 0.2s ease; + gap: 6px; } /* Fluid expand: show title text on hover or when group is open */ .toolbar-group:hover > .toolbar-group-toggle, .toolbar-group.open > .toolbar-group-toggle { max-width: 160px; - padding-left: 10px; + padding-left: 8px; padding-right: 10px; text-align: left; + justify-content: flex-start; + } + + .toolbar-group:hover > .toolbar-group-toggle .tg-label, + .toolbar-group.open > .toolbar-group-toggle .tg-label { + display: inline; } /* Collapse/expand toggle — at top of toolbar */ @@ -1561,12 +1581,17 @@ overflow: visible; justify-content: flex-start; } - /* Show group name on mobile via title attr */ - #toolbar .toolbar-group-toggle::after { - content: attr(title); - margin-left: 8px; + /* Show group name on mobile */ + #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; + } #toolbar .toolbar-dropdown { position: static; @@ -1871,7 +1896,7 @@
- +
Note
@@ -1881,7 +1906,7 @@
- +
Connect
@@ -1892,7 +1917,7 @@
- +
Media
@@ -1905,7 +1930,7 @@
- +
Embed
@@ -1927,7 +1952,7 @@
- +
AI
@@ -1940,7 +1965,7 @@
- +
Create
@@ -1955,7 +1980,7 @@
- +
Decide
@@ -1970,7 +1995,7 @@
- +
Spend
@@ -1980,7 +2005,7 @@
- +
Travel
@@ -4385,7 +4410,7 @@ const heading = document.createElement("div"); heading.className = "menu-heading"; - heading.textContent = toggle.textContent.trim(); + heading.textContent = toggle.getAttribute("title") || toggle.textContent.trim(); toolPlusMenu.appendChild(heading); for (const origBtn of dropdown.querySelectorAll("button")) { @@ -5078,8 +5103,8 @@ const dropdown = group.querySelector(".toolbar-dropdown"); if (!dropdown) return; - // Set header text from the toggle button - toolbarPanelHeader.textContent = toggle.textContent.trim(); + // Set header text from the toggle button's title attribute + toolbarPanelHeader.textContent = toggle.getAttribute("title") || toggle.textContent.trim(); // Clone dropdown buttons into the panel body toolbarPanelBody.innerHTML = "";