From 51d7d79695d14bcfb563accd7128e920a90e725a Mon Sep 17 00:00:00 2001
From: Auto <leon.vanzyl@gmail.com>
Date: Thu, 29 Jan 2026 08:24:39 +0200
Subject: [PATCH] feat(ui): make header sticky with glassy backdrop blur

Add sticky positioning and glassmorphism effect to the top navigation:
- sticky top-0 z-50 for fixed positioning above content
- bg-card/80 for 80% opacity background
- backdrop-blur-md for frosted glass effect

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ui/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 54fe10a..4a830f8 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -242,7 +242,7 @@ function App() {
   return (
     <div className="min-h-screen bg-background">
       {/* Header */}
-      <header className="bg-card text-foreground border-b-2 border-border">
+      <header className="sticky top-0 z-50 bg-card/80 backdrop-blur-md text-foreground border-b-2 border-border">
         <div className="max-w-7xl mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
             {/* Logo and Title */}