Enhance sticky header with proper glassmorphism blur

2026-07-28 14:08:24 +05:30
parent b0d8b664da
commit d273cafd51
1 changed files with 12 additions and 1 deletions
@@ -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' }}>