From 341aae05f813e23e35dce2171a9fe725fccacb02 Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 15:22:22 +0100
Subject: [PATCH] fix(desktop): apply Buzz sidebar overrides to the portaled
 mobile sheet

The token/active-pill/hover/search overrides in theme.css are scoped to
[data-testid="app-sidebar"], but on narrow viewports (<768px) the mobile
Sidebar branch spread that marker onto the Radix Sheet root, which renders
no DOM ancestor of the portaled SheetContent. So the offcanvas sidebar got
the Buzz gradient (fixed separately) but its selected rows and search box
still fell back to the normal accent/grey surfaces over the gradient.

Move the app-sidebar marker (and the rest of the forwarded props) onto
SheetContent so every existing [data-testid="app-sidebar"] rule reaches the
portaled sheet without duplicating selectors. Bump the sidebar.tsx file-size
override by 1 (vendored file already on the split-queue). Verified at a 480px
viewport: the sheet carries data-testid=app-sidebar, --sidebar-active resolves
to white, and the Buzz Dark gradient still applies.

Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
---
 desktop/scripts/check-file-sizes.mjs        | 6 +++++-
 desktop/src/shared/styles/globals/theme.css | 6 ++++++
 desktop/src/shared/ui/sidebar.tsx           | 3 ++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/desktop/scripts/check-file-sizes.mjs b/desktop/scripts/check-file-sizes.mjs
index d03e67e2b..4b994b65f 100644
--- a/desktop/scripts/check-file-sizes.mjs
+++ b/desktop/scripts/check-file-sizes.mjs
@@ -217,7 +217,11 @@ const overrides = new Map([
   // +33 for config-nudge detect-and-render + author-auth gate (normalizePubkey guard).
   ["src/shared/ui/markdown.tsx", 2152],
   ["src/shared/ui/VideoPlayer.tsx", 2199],
-  ["src/shared/ui/sidebar.tsx", 1042],
+  // +1: mobile Sidebar branch forwards the app-sidebar marker (and the rest of
+  // the container props) onto SheetContent instead of the DOM-less Sheet root,
+  // so the Buzz sidebar CSS overrides reach the portaled offcanvas sheet.
+  // Load-bearing correctness fix, not generic debt. Queued to split.
+  ["src/shared/ui/sidebar.tsx", 1043],
   // permission-outcome (fix #1381 regression): pendingPermissions state map,
   // describePermissionOutcome helper, jsonRpcId key helper (handles both
   // string and finite-number JSON-RPC ids per spec), and the acp_write
diff --git a/desktop/src/shared/styles/globals/theme.css b/desktop/src/shared/styles/globals/theme.css
index 6c9e25f55..68fd8e80b 100644
--- a/desktop/src/shared/styles/globals/theme.css
+++ b/desktop/src/shared/styles/globals/theme.css
@@ -297,6 +297,12 @@
  * the selected persona row in PersonaCatalogDialog). A root-level override
  * turned those white (white-on-white under Buzz Dark); scoping keeps them on
  * the normal accent-driven active colors.
+ *
+ * Covers the mobile/offcanvas sidebar too: `Sidebar` (shared/ui/sidebar.tsx)
+ * renders the `data-testid="app-sidebar"` marker on `SheetContent` in its
+ * mobile branch, so this container scope — and every other
+ * `[data-testid="app-sidebar"]` rule below (hover, search box) — reaches the
+ * portaled sheet, not just the desktop `<div>` sidebar.
  */
 :root[data-buzz-sidebar] [data-testid="app-sidebar"] {
   --sidebar-active: 0 0% 100% !important;
diff --git a/desktop/src/shared/ui/sidebar.tsx b/desktop/src/shared/ui/sidebar.tsx
index 4828c15a1..25d70886b 100644
--- a/desktop/src/shared/ui/sidebar.tsx
+++ b/desktop/src/shared/ui/sidebar.tsx
@@ -319,11 +319,12 @@ const Sidebar = React.forwardRef<
 
     if (isMobile) {
       return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <Sheet open={openMobile} onOpenChange={setOpenMobile}>
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
             className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            {...props}
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,