fix(canvas): mobile toolbar positioning — anchor to bottom-right, clear zoom icon

- Keep side toolbar at bottom: 8px in both open and collapsed states
  so the minimize/maximize toggle stays in the same spot
- Shift bottom-toolbar left (left: 56px) to clear the corner-tools
  zoom icon and prevent overlap with the selector tool

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-25 18:09:26 -07:00
parent ad75781efd
commit cd6317fd06
1 changed files with 5 additions and 7 deletions

View File

@ -1635,11 +1635,11 @@
display: none; display: none;
} }
/* Mobile toolbar: compact column on RIGHT to avoid zoom-bar overlap */ /* Mobile toolbar: compact column on RIGHT, anchored to bottom */
#toolbar { #toolbar {
position: fixed; position: fixed;
top: auto; top: auto;
bottom: 60px; /* above bottom-toolbar row */ bottom: 8px;
left: auto; left: auto;
right: 6px; right: 6px;
flex-direction: column; flex-direction: column;
@ -1697,11 +1697,9 @@
padding: 0; padding: 0;
} }
/* Collapsed state on mobile — flush with bottom-toolbar */ /* Collapsed state on mobile */
#toolbar.collapsed { #toolbar.collapsed {
padding: 4px; padding: 4px;
bottom: 8px;
right: 6px;
overflow: visible; overflow: visible;
} }
@ -1749,8 +1747,8 @@
bottom: 8px; bottom: 8px;
padding: 4px 6px; padding: 4px 6px;
gap: 1px; gap: 1px;
left: 8px; left: 56px; /* clear corner-tools zoom icon on left */
right: 56px; /* offset left of side toolbar on right */ right: 56px; /* clear side toolbar on right */
transform: none; transform: none;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;