Refactor EventTimeline to Option 2 layout: Unified Panel with 3 scrolling tracks

ui/src/components/EventTimeline.jsx

@@ -55,8 +55,15 @@ export default function EventTimeline() {
     };
   }, [events]);
 
-  const renderTimeline = (zone, zoneEvents) => (
-    <div className="glass-panel" style={{ flex: 1, overflowY: 'auto', maxHeight: '70vh' }}>
+  const renderTimeline = (zone, zoneEvents, index) => (
+    <div style={{ 
+      flex: 1, 
+      overflowY: 'auto', 
+      maxHeight: '70vh',
+      paddingLeft: index === 0 ? '0' : '1.5rem',
+      paddingRight: index === 2 ? '0' : '1.5rem',
+      borderRight: index === 2 ? 'none' : '1px solid rgba(255,255,255,0.05)'
+    }}>
       <h2 style={{ 
         position: 'sticky', 
         top: 0, 
@@ -64,8 +71,7 @@ export default function EventTimeline() {
         backdropFilter: 'blur(16px)',
         WebkitBackdropFilter: 'blur(16px)',
         paddingBottom: '1rem', 
-        paddingTop: '1rem', 
-        marginTop: '-1rem', 
+        paddingTop: '0.5rem',
         borderBottom: '1px solid var(--panel-border)', 
         zIndex: 10 
       }}>
@@ -134,10 +140,10 @@ export default function EventTimeline() {
         <p>Location-wise sequential breakdown of events</p>
       </div>
 
-      <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
-        {renderTimeline('CO', groupedEvents.CO)}
-        {renderTimeline('Mill', groupedEvents.Mill)}
-        {renderTimeline('Conveyor', groupedEvents.Conveyor)}
+      <div className="glass-panel" style={{ display: 'flex', padding: '1.5rem', alignItems: 'stretch' }}>
+        {renderTimeline('CO', groupedEvents.CO, 0)}
+        {renderTimeline('Mill', groupedEvents.Mill, 1)}
+        {renderTimeline('Conveyor', groupedEvents.Conveyor, 2)}
       </div>
     </div>
   );

ui/src/index.css

@@ -175,3 +175,23 @@ tbody tr:last-child td {
 .animate-fade-in {
   animation: fadeIn 0.4s ease forwards;
 }
+
+/* Custom Scrollbars */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}