From e995c0ec0b8ecb6c7bc761d7ee8d77d7f57ca208 Mon Sep 17 00:00:00 2001
From: Mohan K <mohan.k@cavininfotech.com>
Date: Tue, 28 Jul 2026 14:40:03 +0530
Subject: [PATCH] Center and focus the View Event Timeline button

---
 ui/src/components/ChangeoverDetail.jsx | 51 ++++++++++++++++----------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/ChangeoverDetail.jsx b/ui/src/components/ChangeoverDetail.jsx
index 86d3936..95b21e3 100644
--- a/ui/src/components/ChangeoverDetail.jsx
+++ b/ui/src/components/ChangeoverDetail.jsx
@@ -118,25 +118,38 @@ export default function ChangeoverDetail() {
 
   return (
     <div className="container animate-fade-in">
-      <div className="header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <div>
-          <Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
-            <ArrowLeft size={16} /> Back to Home
-          </Link>
-          <h1>Changeover Session: {id}</h1>
-          <p>Detailed Analytics and SOP Monitoring</p>
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '1rem' }}>
-          <Activity size={32} color="var(--accent)" />
-          <button 
-            className="glass-panel" 
-            style={{ padding: '0.75rem 1.5rem', cursor: 'pointer', background: 'var(--accent)', color: '#fff', border: 'none', fontWeight: 'bold' }}
-            onClick={() => navigate(`/changeover/${id}/timeline`)}
-          >
-            <Calendar size={16} style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }}/>
-            View Event Timeline
-          </button>
-        </div>
+      <div className="header" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: '3rem' }}>
+        <Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', alignSelf: 'flex-start' }}>
+          <ArrowLeft size={16} /> Back to Home
+        </Link>
+        <Activity size={48} color="var(--accent)" style={{ marginBottom: '1rem' }} />
+        <h1 style={{ fontSize: '2.5rem', margin: '0 0 0.5rem 0' }}>Changeover Session: {id}</h1>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.1rem', marginBottom: '2rem' }}>Detailed Analytics and SOP Monitoring</p>
+        
+        <button 
+          className="glass-panel" 
+          style={{ 
+            padding: '1rem 2.5rem', 
+            cursor: 'pointer', 
+            background: 'var(--accent)', 
+            color: '#fff', 
+            border: 'none', 
+            fontWeight: 'bold',
+            fontSize: '1.2rem',
+            borderRadius: '50px',
+            boxShadow: '0 8px 32px rgba(10, 185, 150, 0.3)',
+            transition: 'transform 0.2s, box-shadow 0.2s',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.75rem'
+          }}
+          onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 40px rgba(10, 185, 150, 0.4)'; }}
+          onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(10, 185, 150, 0.3)'; }}
+          onClick={() => navigate(`/changeover/${id}/timeline`)}
+        >
+          <Calendar size={24} />
+          View Event Timeline
+        </button>
       </div>
 
       <div className="kpi-grid">