admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: US-006 - Extend backdrop blur to cover full dashboard including TopBar

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-15 14:22:49 +00:00
parent 42293c5336
commit cd7184cfd4
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Ralph/prd.json
+1 -1
View File
@@ -97,7 +97,7 @@
"Verify in browser using dev-browser skill" "Verify in browser using dev-browser skill"
], ],
"priority": 6, "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." "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."
}, },
{ {
Ralph/progress.txt
+12 -2
View File
@@ -56,8 +56,8 @@
- Blend constants (OVERLAY_BLEND_*) are exported for use by other components (US-005) - Blend constants (OVERLAY_BLEND_*) are exported for use by other components (US-005)
### LoginScreen.tsx State (from previous run) ### LoginScreen.tsx State (from previous run)
- Overlay: fixed inset-0 z-50, rgba(240, 245, 244, 0.7) + backdrop-filter: blur(20px) - Overlay: fixed inset-0 zIndex: 110, rgba(240, 245, 244, 0.7) + backdrop-filter: blur(20px)
- TopBar is zIndex: 100 — currently renders ABOVE the z-50 overlay (bug) - TopBar is zIndex: 100 — overlay now correctly covers it (fixed in US-006)
- Card borderRadius: 12px, inputs/button borderRadius: 4px - Card borderRadius: 12px, inputs/button borderRadius: 4px
- Some colors already tokenized (--surface, --accent, --bg-dashboard) from previous run - Some colors already tokenized (--surface, --accent, --bg-dashboard) from previous run
- Some colors still hardcoded (#111827 input text, button bg states, caret color) - 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 - 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` - 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
---
src/components/LoginScreen.tsx
+2 -1
View File
@@ -167,8 +167,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
return ( return (
<motion.div <motion.div
className="fixed inset-0 flex items-center justify-center z-50" className="fixed inset-0 flex items-center justify-center"
style={{ style={{
zIndex: 110,
backgroundColor: 'rgba(240, 245, 244, 0.7)', backgroundColor: 'rgba(240, 245, 244, 0.7)',
backdropFilter: 'blur(20px)', backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',