From 11fe3df513320cc38e819ac9e7fe59bb1699017c Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 09:26:02 +0800
Subject: [PATCH] Fix ambient background: use positive z-index layering instead
 of negative

Negative z-index (-z-10) placed orbs behind the body's opaque background,
making them invisible. Moved all ambient layers (orbs, noise texture,
vignette) into the DashboardAmbient component as absolute-positioned
children at z-0, with content at z-10. Boosted orb opacities to 12%/7%
for perceptible effect. Removed CSS pseudo-element approach in favor of
inline React elements for better stacking control.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/dashboard/DashboardAmbient.tsx | 24 ++++++++++++++++---
 .../components/dashboard/DashboardPage.tsx    |  6 ++---
 frontend/src/index.css                        | 23 ------------------
 3 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/dashboard/DashboardAmbient.tsx b/frontend/src/components/dashboard/DashboardAmbient.tsx
index e348d56..76aa2b8 100644
--- a/frontend/src/components/dashboard/DashboardAmbient.tsx
+++ b/frontend/src/components/dashboard/DashboardAmbient.tsx
@@ -3,13 +3,15 @@
  * Two accent-colored drifting orbs at very low opacity — adds depth
  * and movement without distracting from content. Reuses the same
  * drift keyframes as the login AmbientBackground but at ~25% opacity.
+ *
+ * Also renders a noise texture and vignette overlay for tactile depth.
  */
 export default function DashboardAmbient() {
   return (
-    <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
       {/* Primary orb — top-left drift */}
       <div
-        className="absolute h-[600px] w-[600px] rounded-full opacity-[0.04] blur-[120px] animate-drift-1"
+        className="absolute h-[600px] w-[600px] rounded-full opacity-[0.12] blur-[120px] animate-drift-1"
         style={{
           background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
           top: '-5%',
@@ -18,13 +20,29 @@ export default function DashboardAmbient() {
       />
       {/* Secondary orb — bottom-right drift */}
       <div
-        className="absolute h-[450px] w-[450px] rounded-full opacity-[0.025] blur-[120px] animate-drift-2"
+        className="absolute h-[450px] w-[450px] rounded-full opacity-[0.07] blur-[120px] animate-drift-2"
         style={{
           background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
           bottom: '5%',
           right: '-5%',
         }}
       />
+      {/* Noise texture */}
+      <div
+        className="absolute inset-0 opacity-[0.035]"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+          backgroundRepeat: 'repeat',
+          backgroundSize: '256px 256px',
+        }}
+      />
+      {/* Radial vignette */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background: 'radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.45) 100%)',
+        }}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/dashboard/DashboardPage.tsx b/frontend/src/components/dashboard/DashboardPage.tsx
index cd369c3..381e5a8 100644
--- a/frontend/src/components/dashboard/DashboardPage.tsx
+++ b/frontend/src/components/dashboard/DashboardPage.tsx
@@ -165,10 +165,10 @@ export default function DashboardPage() {
     : null;
 
   return (
-    <div className="flex flex-col h-full dashboard-ambient">
+    <div className="flex flex-col h-full relative">
       <DashboardAmbient />
       {/* Header — greeting + date + quick add */}
-      <div className="px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
+      <div className="relative z-10 px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
         <div>
           <h1 className="font-heading text-3xl font-bold tracking-tight animate-fade-in">
             {getGreeting(settings?.preferred_name || undefined)}
@@ -239,7 +239,7 @@ export default function DashboardPage() {
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
+      <div className="relative z-10 flex-1 overflow-y-auto px-4 md:px-6 pb-6">
         <div className="space-y-3 sm:space-y-5 animate-content-reveal">
           {/* Week Timeline */}
           {upcomingData && (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7ee71c3..30ab049 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -457,29 +457,6 @@ form[data-submitted] input:invalid + button {
 
 /* ── Dashboard ambient layers ── */
 
-/* SVG noise texture — adds tactile depth to flat dark backgrounds */
-.dashboard-ambient::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  opacity: 0.03;
-  pointer-events: none;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 256px 256px;
-}
-
-/* Radial vignette — darkens edges, draws focus to center content */
-.dashboard-ambient::after {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
-}
-
 /* Card breathing glow — data-aware "alive" pulse for urgent cards */
 @keyframes card-breathe {
   0%, 100% { box-shadow: 0 0 0 0 hsl(var(--accent-color) / 0.05); }