From cd7184cfd4031a0cf8b02a72f01ec342aed175c4 Mon Sep 17 00:00:00 2001
From: Andy Charlwood <andrew.charlwood@gmail.com>
Date: Sun, 15 Feb 2026 14:22:49 +0000
Subject: [PATCH] feat: US-006 - Extend backdrop blur to cover full dashboard
 including TopBar

---
 Ralph/prd.json                 |  2 +-
 Ralph/progress.txt             | 14 ++++++++++++--
 src/components/LoginScreen.tsx |  3 ++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/Ralph/prd.json b/Ralph/prd.json
index c9fddc4..c5a56d1 100644
--- a/Ralph/prd.json
+++ b/Ralph/prd.json
@@ -97,7 +97,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 6,
-      "passes": false,
+      "passes": true,
       "notes": "LoginScreen outer overlay currently has 'fixed inset-0 z-50'. TopBar is zIndex: 100. The overlay needs z-index > 100 to cover it. The login card inside the overlay doesn't need its own z-index since it's a child of the overlay. Check that the dissolve exit animation (isExiting) still works after the z-index change."
     },
     {
diff --git a/Ralph/progress.txt b/Ralph/progress.txt
index 265da2c..39dfd35 100644
--- a/Ralph/progress.txt
+++ b/Ralph/progress.txt
@@ -56,8 +56,8 @@
 - Blend constants (OVERLAY_BLEND_*) are exported for use by other components (US-005)
 
 ### LoginScreen.tsx State (from previous run)
-- Overlay: fixed inset-0 z-50, rgba(240, 245, 244, 0.7) + backdrop-filter: blur(20px)
-- TopBar is zIndex: 100 — currently renders ABOVE the z-50 overlay (bug)
+- Overlay: fixed inset-0 zIndex: 110, rgba(240, 245, 244, 0.7) + backdrop-filter: blur(20px)
+- TopBar is zIndex: 100 — overlay now correctly covers it (fixed in US-006)
 - Card borderRadius: 12px, inputs/button borderRadius: 4px
 - Some colors already tokenized (--surface, --accent, --bg-dashboard) from previous run
 - Some colors still hardcoded (#111827 input text, button bg states, caret color)
@@ -123,3 +123,13 @@
   - The `useMemo` for `blendStartMs` avoids recalculation — all timing constants are module-level so this is stable
   - Combined CSS transition strings work in SVG `<g>` style: `transform 0.6s cubic-bezier(...), opacity 0.3s ease-out`
 ---
+
+## 2026-02-15 - US-006: Extend backdrop blur to cover full dashboard including TopBar
+- Changed overlay from Tailwind `z-50` class to inline `zIndex: 110` to sit above TopBar (`zIndex: 100`)
+- Browser-verified: TopBar, sidebar, and all content uniformly blurred; login card remains crisp
+- Files changed: `src/components/LoginScreen.tsx`
+- **Learnings for future iterations:**
+  - TopBar uses inline `zIndex: 100` (not a Tailwind class), so overlay needs inline zIndex > 100
+  - Tailwind's `z-50` = z-index 50, which was below the TopBar — switched to inline style for precise control
+  - The login card doesn't need its own z-index since it's a child of the overlay and inherits stacking context
+---
diff --git a/src/components/LoginScreen.tsx b/src/components/LoginScreen.tsx
index 7711b78..43dbef7 100644
--- a/src/components/LoginScreen.tsx
+++ b/src/components/LoginScreen.tsx
@@ -167,8 +167,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
 
   return (
     <motion.div
-      className="fixed inset-0 flex items-center justify-center z-50"
+      className="fixed inset-0 flex items-center justify-center"
       style={{
+        zIndex: 110,
         backgroundColor: 'rgba(240, 245, 244, 0.7)',
         backdropFilter: 'blur(20px)',
         WebkitBackdropFilter: 'blur(20px)',