mohanki/MRF-AI-SOP-Monitoring-react-node-postgres
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance sticky header with proper glassmorphism blur

Browse Source
This commit is contained in:
Mohan K
2026-07-28 14:08:24 +05:30
parent b0d8b664da
commit d273cafd51
1 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/EventTimeline.jsx
+12 -1
View File
@@ -57,7 +57,18 @@ export default function EventTimeline() {
const renderTimeline = (zone, zoneEvents) => ( const renderTimeline = (zone, zoneEvents) => (
<div className="glass-panel" style={{ flex: 1, overflowY: 'auto', maxHeight: '70vh' }}> <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 {zone} Timeline
</h2> </h2>
<div style={{ marginTop: '1rem' }}> <div style={{ marginTop: '1rem' }}>