Center and focus the View Event Timeline button

ui/src/components/ChangeoverDetail.jsx

@@ -118,26 +118,39 @@ export default function ChangeoverDetail() {
 
   return (
     <div className="container animate-fade-in">
-      <div className="header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <div className="header" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: '3rem' }}>
-        <div>
+        <Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', alignSelf: 'flex-start' }}>
-          <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>
+        <Activity size={48} color="var(--accent)" style={{ marginBottom: '1rem' }} />
-          <p>Detailed Analytics and SOP Monitoring</p>
+        <h1 style={{ fontSize: '2.5rem', margin: '0 0 0.5rem 0' }}>Changeover Session: {id}</h1>
-        </div>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.1rem', marginBottom: '2rem' }}>Detailed Analytics and SOP Monitoring</p>
-        <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' }}
+          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={16} style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }}/>
+          <Calendar size={24} />
           View Event Timeline
         </button>
       </div>
-      </div>
 
       <div className="kpi-grid">
         <div className="glass-panel kpi-card">