Skip to content

fix desktop canvas header blur in split channel management#1558

Merged
tellaho merged 1 commit into
mainfrom
tho/canvas-aux-header-stack-fix
Jul 6, 2026
Merged

fix desktop canvas header blur in split channel management#1558
tellaho merged 1 commit into
mainfrom
tho/canvas-aux-header-stack-fix

Conversation

@tellaho

@tellaho tellaho commented Jul 6, 2026

Copy link
Copy Markdown
Collaborator

Category: fix
User Impact: The Canvas panel header stays readable and clickable in dark-mode split layouts.
Problem: Opening Canvas from channel management in dark mode could blur out the header controls, leaving the back and close buttons present but visually hidden behind the shared channel header strip.
Solution: Remove the inert translucent blur surface from the docked channel-management dialog wrapper so it no longer creates a stacking context above the Canvas header. Overlay and standalone panel chrome keep their existing blur behavior.

File changes

desktop/src/features/channels/ui/ChannelManagementSheet.tsx
Drops the dark-mode backdrop-blur-xl surface from the split-layout DialogPrimitive.Content and documents why the docked pane should stay on the opaque base background. This prevents backdrop-filter from trapping the Canvas header beneath the shared channel header blur strip while leaving overlay/standalone mode unchanged.

Reproduction Steps

  1. Run the desktop app in dark mode at a width that uses the split auxiliary pane.
  2. Open a channel's management panel.
  3. Open the Canvas view from channel management.
  4. Confirm the back affordance, Canvas title, and close action remain crisp and visible in the header.

Screenshots/Demos

Marge reproduced the regression on latest origin/main and verified the fix on this branch.

Before (origin/main) — title, back, and close blurred out:
image

After (d3fe2dad) — back, Canvas title, and close are crisp:
image

Full pane before / after:
image
image

Validation

  • biome check .
  • pnpm check
  • tsc --noEmit
  • Unit tests: 1629 passed ✅
  • E2E: channel-shared-header-backdrop + channel-controls — 9 passed ✅
  • Push hooks with Hermit activated: desktop, mobile, Rust, and Tauri tests passed ✅

In split layout, ChannelManagementSheet's DialogPrimitive.Content applied
backdrop-blur-xl in dark mode. backdrop-filter creates a stacking context,
which trapped the panel's z-40 header beneath ChannelPane's shared z-30
header blur strip, leaving the Canvas/channel header row blurred over and
its back button invisible but still hit-testable.

Drop the translucent blur surface from the split branch: the pane already
renders on the opaque bg-background from PANEL_BASE_CLASS, so the blur was
visually inert there. Overlay and standalone modes keep their blur.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
@tellaho tellaho merged commit 2ef26ec into main Jul 6, 2026
25 checks passed
@tellaho tellaho deleted the tho/canvas-aux-header-stack-fix branch July 6, 2026 23: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