From 25a3ef2a5ac418ae2eb3b67b89e16aa6a9f6eb79 Mon Sep 17 00:00:00 2001
From: Mohan K <mohan.k@cavininfotech.com>
Date: Tue, 28 Jul 2026 14:23:42 +0530
Subject: [PATCH] Style event items as isolated box cards

---
 ui/src/components/EventTimeline.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/EventTimeline.jsx b/ui/src/components/EventTimeline.jsx
index 135d054..72ea688 100644
--- a/ui/src/components/EventTimeline.jsx
+++ b/ui/src/components/EventTimeline.jsx
@@ -67,10 +67,16 @@ export default function EventTimeline() {
   const renderEventCard = (ev, i, arrLength) => (
     <div key={ev.id} style={{ 
       display: 'flex', flexDirection: 'column', 
-      paddingBottom: i < arrLength - 1 ? '1rem' : '0', 
+      background: 'rgba(255, 255, 255, 0.03)',
+      border: '1px solid rgba(255, 255, 255, 0.05)',
+      borderRadius: '12px',
+      padding: '1rem',
       marginBottom: i < arrLength - 1 ? '1rem' : '0',
-      borderBottom: i < arrLength - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none' 
-    }}>
+      transition: 'transform 0.2s ease, background 0.2s ease'
+    }}
+    onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.06)'}
+    onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.03)'}
+    >
       <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
         <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
           {ev.start_time.substring(0, 5)} - {ev.end_time.substring(0, 5)}