Skip to content

feedback: side panels as floating Figma-style cards - #38

Merged
lukataylo merged 1 commit into
mainfrom
feedback-floating-side-panels
May 24, 2026
Merged

feedback: side panels as floating Figma-style cards#38
lukataylo merged 1 commit into
mainfrom
feedback-floating-side-panels

Conversation

@lukataylo

Copy link
Copy Markdown
Owner

Layers panel was full-bleed against the screen edge, sharp corners, top edge cutting into the TopBar, with the single Layers tab rendering as an oversized full-width button.

Restructured to a floating panel:

  • Inset 12px from screen edge, top 64 / bottom 80 (above PluginToolBar)
  • 12px borderRadius + hairline border + soft outer shadow
  • zIndex 35 (below TopBar's 50) so it can't overpaint the header
  • Single-tab panels render the tab as a left-aligned uppercase title
  • Tab strip more compact: 28px tall buttons, 12px font

🤖 Generated with Claude Code

Layers panel was full-bleed against the screen edge, sharp corners,
top edge cutting into / overlapping the TopBar, with the single
"Layers" tab rendering as an oversized full-width button at the top.
Read as broken, not as a panel.

Restructured to a proper floating panel:
- Inset 12px from screen edge (8px on narrow viewports), top 64 / bottom
  80 so the TopBar (~56px) and PluginToolBar (~60px) stay fully visible
  with breathing room
- 12px borderRadius + 1px hairline border + 0 12px 40px outer shadow —
  reads as a "card floating on the canvas"
- zIndex lowered from 40 → 35, below TopBar's z=50 so a full-bleed
  regression can never overpaint the header again
- backdrop-filter blur bumped 12 → 14px with bg opacity 0.92 → 0.96 for
  a more solid feel against the dark canvas

Single-tab panels (Layers, Inspect) now render the tab as a left-
aligned uppercase letter-spaced TITLE (11px, 600 weight, no hover
treatment) rather than a clickable-looking button. Multi-tab panels
keep the segmented-control treatment.

Tab strip itself is more compact: padding 8x10, gap 2, tab buttons
28px tall with 12px font (was 40px tall with 13px). Stops the strip
dominating the panel header.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@lukataylo
lukataylo merged commit 4db1ae0 into main May 24, 2026
7 checks passed
@lukataylo
lukataylo deleted the feedback-floating-side-panels branch May 24, 2026 12:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants