From 62949c997f91aa35788722185fd39507524fed80 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 11:18:46 +0800
Subject: [PATCH] Fix ambient edge clipping: extend orb layers with -100px
 inset

Drift animations translate orbs up to 80px, causing hard cutoff at
container edges. Giving orb layers inset: -100px provides enough
bleed room so the gradient edges are always beyond the overflow-hidden
boundary.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/dashboard/DashboardAmbient.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/DashboardAmbient.tsx b/frontend/src/components/dashboard/DashboardAmbient.tsx
index 4685042..63d4bec 100644
--- a/frontend/src/components/dashboard/DashboardAmbient.tsx
+++ b/frontend/src/components/dashboard/DashboardAmbient.tsx
@@ -10,16 +10,18 @@
 export default function DashboardAmbient() {
   return (
     <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
-      {/* Animated gradient orbs — position shifts via CSS animation */}
+      {/* Animated gradient orbs — oversized so drift never clips at visible edges */}
       <div
-        className="absolute inset-0 animate-drift-1"
+        className="absolute animate-drift-1"
         style={{
+          inset: '-100px',
           background: 'radial-gradient(ellipse 90% 70% at 30% 20%, hsl(var(--accent-color) / 0.45) 0%, transparent 60%)',
         }}
       />
       <div
-        className="absolute inset-0 animate-drift-2"
+        className="absolute animate-drift-2"
         style={{
+          inset: '-100px',
           background: 'radial-gradient(ellipse 80% 60% at 75% 75%, hsl(var(--accent-color) / 0.35) 0%, transparent 60%)',
         }}
       />