From d273cafd51c7e500314ea23c673116a5a043f5d2 Mon Sep 17 00:00:00 2001
From: Mohan K <mohan.k@cavininfotech.com>
Date: Tue, 28 Jul 2026 14:08:24 +0530
Subject: [PATCH] Enhance sticky header with proper glassmorphism blur

---
 ui/src/components/EventTimeline.jsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/EventTimeline.jsx b/ui/src/components/EventTimeline.jsx
index 4bab4dd..b14f16a 100644
--- a/ui/src/components/EventTimeline.jsx
+++ b/ui/src/components/EventTimeline.jsx
@@ -57,7 +57,18 @@ export default function EventTimeline() {
 
   const renderTimeline = (zone, zoneEvents) => (
     <div className="glass-panel" style={{ flex: 1, overflowY: 'auto', maxHeight: '70vh' }}>
-      <h2 style={{ position: 'sticky', top: 0, background: 'var(--bg-color)', paddingBottom: '1rem', paddingTop: '1rem', marginTop: '-1rem', borderBottom: '1px solid rgba(255,255,255,0.1)', zIndex: 10 }}>
+      <h2 style={{ 
+        position: 'sticky', 
+        top: 0, 
+        background: 'var(--panel-bg)', 
+        backdropFilter: 'blur(16px)',
+        WebkitBackdropFilter: 'blur(16px)',
+        paddingBottom: '1rem', 
+        paddingTop: '1rem', 
+        marginTop: '-1rem', 
+        borderBottom: '1px solid var(--panel-border)', 
+        zIndex: 10 
+      }}>
         {zone} Timeline
       </h2>
       <div style={{ marginTop: '1rem' }}>