From 23cdfddea03fd0eb31690636c8903957bb11a523 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Wed, 19 Nov 2025 12:51:05 -0500
Subject: [PATCH] Remove overflow clipping to allow sidecar drop shadow to
 spill properly

- Remove overflow-hidden from ResizableSplitter right panel when floating
- Remove overflow-hidden from EnhancedBentoBox main container
- Allows drop shadow to render properly without being clipped
- Shadow can now spill into other sections of the app as intended
- Fixes grey appearance caused by clipped shadows
---
 ui/desktop/src/components/Layout/EnhancedBentoBox.tsx  | 2 +-
 ui/desktop/src/components/Layout/ResizableSplitter.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/Layout/EnhancedBentoBox.tsx b/ui/desktop/src/components/Layout/EnhancedBentoBox.tsx
index 10907eda89..cf8d0828ed 100644
--- a/ui/desktop/src/components/Layout/EnhancedBentoBox.tsx
+++ b/ui/desktop/src/components/Layout/EnhancedBentoBox.tsx
@@ -461,7 +461,7 @@ export const EnhancedBentoBox: React.FC<EnhancedBentoBoxProps> = ({
   return (
     <motion.div 
       layout
-      className="flex-1 h-full bg-background-default rounded-xl overflow-hidden relative border border-border-subtle"
+      className="flex-1 h-full bg-background-default rounded-xl relative border border-border-subtle"
       initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.3 }}
diff --git a/ui/desktop/src/components/Layout/ResizableSplitter.tsx b/ui/desktop/src/components/Layout/ResizableSplitter.tsx
index b6c5971555..4b8cba7c3b 100644
--- a/ui/desktop/src/components/Layout/ResizableSplitter.tsx
+++ b/ui/desktop/src/components/Layout/ResizableSplitter.tsx
@@ -111,7 +111,7 @@ export const ResizableSplitter: React.FC<ResizableSplitterProps> = ({
 
       {/* Right Panel */}
       <div 
-        className={`flex-1 overflow-hidden ${floatingRight ? 'relative bg-background-default' : ''}`}
+        className={`flex-1 ${floatingRight ? 'relative bg-background-default' : 'overflow-hidden'}`}
         style={{ width: `${rightWidth}%` }}
       >
         {floatingRight ? (