From de1604ddb96d02bb0cae21291aa4506021daeb88 Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 14:59:37 +0100
Subject: [PATCH] fix(desktop): extend Buzz gradient to the portaled mobile
 sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 desktop/src/shared/styles/globals/theme.css | 22 +++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/desktop/src/shared/styles/globals/theme.css b/desktop/src/shared/styles/globals/theme.css
index 7411e84bd..6c9e25f55 100644
--- a/desktop/src/shared/styles/globals/theme.css
+++ b/desktop/src/shared/styles/globals/theme.css
@@ -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,