jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): toolbar labels pop out to the right as tooltips 

Labels now appear as floating tags outside the toolbar on hover/open
instead of expanding the button width inside the narrow toolbar.
Toolbar overflow changed to visible so labels aren't clipped.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-09 20:38:55 -07:00
parent eac0817d4f
commit bee09b0e43
1 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
website/canvas.html
View File

@ -45,9 +45,7 @@
box-shadow: var(--rs-shadow-md);
z-index: 1000;
max-height: calc(100vh - 130px);
overflow-y: auto;
overflow-x: visible;
scrollbar-width: thin;
overflow: visible;
}
/* Dropdown group container */
@ -249,37 +247,33 @@
}
.tg-label {
display: none;
font-size: 12px;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
background: var(--rs-toolbar-panel-bg, #1e293b);
color: var(--rs-text-primary, #e2e8f0);
padding: 4px 8px;
border-radius: 6px;
box-shadow: var(--rs-shadow-md);
pointer-events: none;
z-index: 1002;
}
/* Icon-only toolbar: show only emoji, fluid expand on hover/open */
/* Icon-only toolbar: fixed width, label pops out */
.toolbar-group-toggle {
max-width: 42px;
overflow: hidden;
text-overflow: clip;
text-align: center;
padding-left: 0;
padding-right: 0;
overflow: visible;
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: 8px;
padding-right: 10px;
text-align: left;
justify-content: flex-start;
}
/* Show label outside toolbar on hover or when group is open */
.toolbar-group:hover > .toolbar-group-toggle .tg-label,
.toolbar-group.open > .toolbar-group-toggle .tg-label {
display: inline;
display: block;
}
/* Collapse/expand toggle — at top of toolbar */