From 13b37f16d30f0e7b4ff53ecadc8cb5de962a28cd Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Tue, 17 Feb 2026 12:06:59 -0500
Subject: [PATCH] fix: Add sidebar background color for mobile overlay

- Add missing --color-sidebar CSS variable to generate bg-sidebar utility
- Update SheetContent to allow background class override
- Fixes missing background on mobile navigation overlay at small breakpoints
---
 ui/desktop/src/components/ui/sheet.tsx | 4 +++-
 ui/desktop/src/styles/main.css         | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/desktop/src/components/ui/sheet.tsx b/ui/desktop/src/components/ui/sheet.tsx
index f9b4ef13cd..250892ea87 100644
--- a/ui/desktop/src/components/ui/sheet.tsx
+++ b/ui/desktop/src/components/ui/sheet.tsx
@@ -52,7 +52,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'bg-background-primary data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 shadow-lg',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 shadow-lg',
           side === 'right' &&
             'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
           side === 'left' &&
@@ -61,6 +61,8 @@ function SheetContent({
             'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
           side === 'bottom' &&
             'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          // Apply bg-background-primary as default, but allow override via className
+          !className?.includes('bg-') && 'bg-background-primary',
           className
         )}
         {...props}
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 20d888fe43..04bea7755e 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -198,6 +198,7 @@
 
   --color-ring: var(--color-ring-primary);
 
+  --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);