From 9cefb8b52811b059469b5f64c66aa180f5bd428f Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 14:44:43 +0100
Subject: [PATCH] fix(desktop): scope Buzz gradient to the app shell chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The gradient rule matched every \`.bg-sidebar\` element in the document, so it
leaked onto non-chrome surfaces that reuse the token — the persona catalog
dialog (a Radix dialog portaled to <body>, outside the app shell) and the
sidebar drag-overlay chips. Those got painted with the viewport-fixed sidebar
gradient instead of their normal panel/flat background.

- Scope the gradient selector to \`.group/sidebar-wrapper\` (the SidebarProvider
  wrapper that contains the top chrome bar, sidebar column, and inset). The
  persona dialog portals outside that subtree, so it keeps its own background.
- The drag-overlay pills render inside the wrapper but are transient floating
  chips, not canvas surfaces, so a fixed gradient behind them shows an arbitrary
  slice. Mark them \`data-buzz-flat\` and exclude that from the gradient rule.

Verified: theme screenshot spec passes (sidebar gradient unchanged across the
full canvas), 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>
---
 .../src/features/sidebar/ui/SidebarDnd.tsx    | 10 +++++++--
 desktop/src/shared/styles/globals/theme.css   | 22 ++++++++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/desktop/src/features/sidebar/ui/SidebarDnd.tsx b/desktop/src/features/sidebar/ui/SidebarDnd.tsx
index 3ed92e65d6..41cc6fe669 100644
--- a/desktop/src/features/sidebar/ui/SidebarDnd.tsx
+++ b/desktop/src/features/sidebar/ui/SidebarDnd.tsx
@@ -147,7 +147,10 @@ export function SortableSectionShell({
 
 export function DragOverlayChannel({ name }: { name: string }) {
   return (
-    <div className="flex cursor-grabbing items-center gap-2 rounded-md bg-sidebar px-2 py-1.5 text-sm text-sidebar-foreground opacity-90 shadow-lg ring-1 ring-sidebar-border">
+    <div
+      data-buzz-flat
+      className="flex cursor-grabbing items-center gap-2 rounded-md bg-sidebar px-2 py-1.5 text-sm text-sidebar-foreground opacity-90 shadow-lg ring-1 ring-sidebar-border"
+    >
       <Hash className="h-4 w-4 shrink-0 text-sidebar-foreground/60" />
       <span className="truncate">{name}</span>
     </div>
@@ -156,7 +159,10 @@ export function DragOverlayChannel({ name }: { name: string }) {
 
 export function DragOverlaySection({ name }: { name: string }) {
   return (
-    <div className="flex cursor-grabbing items-center gap-1 rounded-md bg-sidebar px-2 py-1 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60 opacity-90 shadow-lg ring-1 ring-sidebar-border">
+    <div
+      data-buzz-flat
+      className="flex cursor-grabbing items-center gap-1 rounded-md bg-sidebar px-2 py-1 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60 opacity-90 shadow-lg ring-1 ring-sidebar-border"
+    >
       <span>{name}</span>
     </div>
   );
diff --git a/desktop/src/shared/styles/globals/theme.css b/desktop/src/shared/styles/globals/theme.css
index 976fbee901..7411e84bd7 100644
--- a/desktop/src/shared/styles/globals/theme.css
+++ b/desktop/src/shared/styles/globals/theme.css
@@ -176,13 +176,21 @@
  * lives in Tailwind's `utilities` layer, and unlayered declarations win over
  * any layered ones, so this reliably overrides it without an `!important`.
  *
- * The gradient is applied to every `bg-sidebar` canvas surface (the top
- * chrome bar, the sidebar column, and the inset margin behind the white
- * content card). `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
+ * 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.
  *
+ * Small transient `bg-sidebar` chips inside the shell that are NOT canvas
+ * surfaces (the drag-overlay pills) opt out via `[data-buzz-flat]` — a
+ * viewport-fixed gradient behind a small floating chip would show an arbitrary
+ * slice of the ramp.
+ *
  * Item hover/active states use `bg-sidebar-accent` / `bg-sidebar-active`
  * (distinct tokens) and are intentionally left untouched.
  */
@@ -202,7 +210,9 @@
   --buzz-gradient-bottom: #1b2530;
 }
 
-:root[data-buzz-sidebar] .bg-sidebar {
+:root[data-buzz-sidebar]
+  .group\/sidebar-wrapper
+  .bg-sidebar:not([data-buzz-flat]) {
   background-color: transparent;
   background-image: linear-gradient(
     to bottom,