fix(desktop): keep the sidebar translucent over the native backdrop - #360
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The sidebar lost its translucency over the native backdrop between v0.12.0 and v0.13.0 (still present on master / 0.14.0).
On macOS and Windows the window is created
transparentwithvibrancy: 'sidebar'(apps/desktop/src/main/appearance.ts), and the sidebar paints only a 25% tint (bg-sidebar/25) so the native material shows through. That relies on an implicit invariant: no ancestor between[data-shell-pane="sidebar"]and<html>may paint an opaque background. The main pane carriesbg-backgroundon purpose; the sidebar cell is deliberately left bare —index.csscalls it "naked vibrancy in the workspace slits".The resources panel wrapped
DesktopWorkspacein a new grid container (80c97ae), and b389a67 then addedbg-backgroundto that wrapper to unify the floating rail's gutter with the main content. The wrapper spans the sidebar column too, so the sidebar's 25% tint now composites over opaque white instead of the blurred backdrop.Nothing catches this: it type-checks, lints and tests clean — the only signal is visual.
Fix
Move
bg-backgroundoff the shared grid wrapper onto the floating rail<aside>alone. The rail keeps the unified gutter b389a67 wanted; the sidebar column goes back to reaching the native backdrop.apps/webviewhas the same class on its equivalent wrapper, but its sidebar is opaquebg-sidebar, so it has no visual effect there and is left untouched.Verification
Screenshots can't settle this — Playwright composites only the web layer, so native vibrancy never appears in a capture. Verified instead by reading the computed paint stack over CDP against a running
dev:mockshell, walking from the sidebar pane up to<html>:bg-backgroundon the wrapper<div class="grid … bg-background"> → rgb(255, 255, 255)The rail itself still resolves to
rgb(255, 255, 255), matching[data-shell-pane="main"].Also confirmed visually in the real window on macOS.
pnpm check:ci— 0 errors.pnpm test— 2234 passed, 5 skipped.