From 9ce515f5aefd4f516ce517968cee5832ca239da8 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 3 Mar 2026 22:55:54 +1300
Subject: [PATCH] style: improve settings panel shadow with smooth multi-stop
 gradient

Replace the narrow hard-edged gradient strip with a wide, smooth
multi-stop gradient that extends behind the panel for a natural
shadow falloff instead of a stepped/hard edge.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/ControlPanel.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/nodes/ControlPanel.tsx b/src/components/nodes/ControlPanel.tsx
index a39fa752..39d139f5 100644
--- a/src/components/nodes/ControlPanel.tsx
+++ b/src/components/nodes/ControlPanel.tsx
@@ -117,8 +117,15 @@ export function ControlPanel() {
 
   return (
     <div className="fixed top-0 right-6 h-screen z-[50] flex items-center pointer-events-none">
-      {/* Shadow/gradient overlay on left edge */}
-      <div className="absolute right-full top-0 h-full w-24 bg-gradient-to-r from-transparent to-black/20 pointer-events-none" />
+      {/* Shadow overlay behind panel - wide, smooth, multi-stop gradient */}
+      <div
+        className="absolute top-0 h-full pointer-events-none"
+        style={{
+          right: 0,
+          width: 'calc(100% + 20rem)',
+          background: 'linear-gradient(to right, transparent 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.08) 65%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.35) 95%, rgba(0,0,0,0.45) 100%)',
+        }}
+      />
       <div className="w-80 bg-neutral-800 border border-neutral-700 rounded-xl shadow-xl max-h-[80vh] overflow-y-auto pointer-events-auto transition-opacity duration-200 nowheel">
         <div className="p-4">
           {/* Header */}