External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(desktop): extend Buzz gradient to the portaled mobile sidebar

Browse Source 
The previous scoping to \`.group/sidebar-wrapper\` correctly excluded unrelated
portals (persona dialog), but it also excluded the mobile/offcanvas sidebar:
on narrow viewports (<768px) the sidebar renders as a \`SheetContent\` inside a
\`SheetPortal\`, outside the shell wrapper, so Buzz/Buzz Dark fell back to the
flat grey \`--sidebar-background\`.

Add the portaled mobile sidebar surface as a second, precise gradient target
(\`[data-sidebar="sidebar"][data-mobile="true"].bg-sidebar\`) sharing the same
declaration block — without re-broadening to every \`.bg-sidebar\` in the
document. The pinned-header/footer repaint rules are scoped to
\`[data-testid="app-sidebar"]\` (a descendant that renders inside the sheet too),
so they already cover mobile.

Verified at a 480px viewport: opening the mobile sheet shows the Buzz Dark
gradient on the \`[data-mobile="true"]\` surface (background-image is the
gradient, background-color cleared). Desktop theme screenshot spec still
passes; desktop-check + tsc clean, no new biome warnings.

Fixes the Codex P2 review comment on PR #1630.

Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
2026-07-08 14:59:37 +01:00
parent 9cefb8b528
commit de1604ddb9
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/shared/styles/globals/theme.css
+14 -8
View File
@@ -178,13 +178,17 @@
*
* The gradient is applied to every `bg-sidebar` canvas surface INSIDE the app
* shell (`.group\/sidebar-wrapper` — the top chrome bar, the sidebar column,
* and the inset margin behind the white content card). Scoping to the shell
* wrapper keeps the branding on the app chrome and off unrelated `bg-sidebar`
* consumers rendered in portals outside the shell (e.g. the persona catalog
* dialog). `background-attachment: fixed` anchors the gradient to the viewport
* so these separate surfaces read as one continuous gradient rather than each
* restarting the ramp. `background-color` is cleared so the grey
* `--sidebar-background` never shows through.
* and the inset margin behind the white content card), PLUS the portaled
* mobile sidebar (the `SheetContent` rendered by the offcanvas branch on
* narrow viewports, marked `[data-sidebar="sidebar"][data-mobile="true"]`).
* The mobile sheet lives in a `SheetPortal` outside the shell wrapper, so it
* needs its own precise selector rather than re-broadening to every portal.
* Scoping this way keeps the branding on the app chrome and off unrelated
* `bg-sidebar` consumers rendered in portals outside the shell (e.g. the
* persona catalog dialog). `background-attachment: fixed` anchors the gradient
* to the viewport so these separate surfaces read as one continuous gradient
* rather than each restarting the ramp. `background-color` is cleared so the
* grey `--sidebar-background` never shows through.
*
* Small transient `bg-sidebar` chips inside the shell that are NOT canvas
* surfaces (the drag-overlay pills) opt out via `[data-buzz-flat]` — a
@@ -212,7 +216,9 @@
:root[data-buzz-sidebar]
.group\/sidebar-wrapper
.bg-sidebar:not([data-buzz-flat]) {
.bg-sidebar:not([data-buzz-flat]),
:root[data-buzz-sidebar]
[data-sidebar="sidebar"][data-mobile="true"].bg-sidebar {
background-color: transparent;
background-image: linear-gradient(
to bottom,