fix(desktop): let the glass background show through the community rail - #5977
fix(desktop): let the glass background show through the community rail#5977thomaspblock wants to merge 1 commit into
Conversation
The glass treatment (#5478) clears the background on every navigation surface — app sidebar, settings sidebar, pinned header, footer — so the native vibrancy shows through, but the community rail's opaque `bg-sidebar` paint was left out of the `:root[data-glass-background]` transparency list. With multiple communities the rail rendered as a solid column while the sidebar next to it frosted, splitting the nav into two visibly different panes. The Buzz-theme gradient rule already includes the rail selector; the glass rule simply forgot it. Add the rail to the glass transparency list and a Playwright regression spec that fails on the unpatched build: with glass enabled and two communities seeded, the rail's computed background must be transparent. Co-authored-by: Thomas Petersen <thomasp@squareup.com> Signed-off-by: Thomas Petersen <thomasp@squareup.com>
ScreenshotsPlaywright (e2e harness), glass enabled, simulated desktop wallpaper injected behind the transparent window (headless Chrome has no macOS vibrancy layer). Before — the community/relay rail stays an opaque strip on the far left while the sidebar next to it frosts:
After — the wallpaper shows through the entire navigation column, rail included:
|
themiguelamador
left a comment
themiguelamador
left a comment
There was a problem hiding this comment.
The CSS fix is correct, but the new regression spec seeds its second community after installMockBridge(page). This repo requires all localStorage seeding to be registered before the bridge: React consumes that state during mount, and relying on ordering among separately registered init scripts makes the test nondeterministic as the harness evolves.
I fixed the spec in Complear:review/pr-5977-fix at 452a394d8da73c78c49db67f90e79f40d74d2a75. It seeds the complete two-community state before installing the bridge and opts out of the bridge's default community seed.
Verification:
- fresh
pnpm build:e2e— passed - focused
glass-rail.spec.tsPlaywright smoke test — 1 passed pnpm exec biome checkon all touched files — cleanpnpm exec tsc --noEmit— passedpnpm test— 4,954 passed
2 participants
Problem
With Glass background enabled, the community/relay rail stayed a solid opaque column while every other navigation surface frosted. Reported in buzz-bugs: the glass treatment "doesn't properly affect the relay column."
Cause
The glass treatment (#5478) clears
backgroundon each nav surface via the:root[data-glass-background]transparency list intheme.css— app sidebar, settings sidebar, pinned header, footer — but the community rail'sbg-sidebarselector was left out. The older Buzz-theme rule (:root[data-buzz-sidebar]) already lists[data-testid="community-rail"].bg-sidebar; the glass rule simply forgot it, so the rail kept its opaque paint.Fix
One selector added to the glass transparency list:
Proof
Playwright regression spec (
glass-rail.spec.ts, smoke project): glass enabled + two communities seeded → the rail's computedbackground-colormust bergba(0, 0, 0, 0). Fails on the unpatched build (rgb(246, 246, 246)), passes with the fix. Before/after screenshots in the comment below.Verification
pnpm test— 4954/4954 unit tests passpnpm lint— clean on touched filespnpm exec tsc— clean