From 07f4bff98f1893582afa936477a26ac48786bc65 Mon Sep 17 00:00:00 2001
From: accius <chris@cjhlighting.com>
Date: Mon, 2 Feb 2026 11:57:41 -0500
Subject: [PATCH] header shake fix

---
 src/App.jsx               |  2 +-
 src/components/Header.jsx | 44 ++++++++++++++++++++++++++-------------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4cc8f87..015eccd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -262,7 +262,7 @@ const App = () => {
                 Up 35d 18h • v4.20
               </div>
               <div style={{ marginTop: '8px' }}>
-                <div style={{ fontSize: '36px', fontWeight: '700', color: '#00ff00', fontFamily: 'Orbitron, monospace', lineHeight: 1 }}>
+                <div style={{ fontSize: '36px', fontWeight: '700', color: '#00ff00', fontFamily: 'Orbitron, monospace', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                   {utcTime}<span style={{ fontSize: '20px', color: '#00cc00' }}>:{String(new Date().getUTCSeconds()).padStart(2, '0')}</span>
                 </div>
                 <div style={{ fontSize: '14px', color: '#00cc00', marginTop: '2px' }}>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 7084b7e..14d4a2b 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -45,9 +45,17 @@ export const Header = ({
       
       {/* UTC Clock */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <span style={{ fontSize: '14px', color: 'var(--accent-cyan)', fontWeight: '600' }}>UTC</span>
-        <span style={{ fontSize: '28px', fontWeight: '700', color: 'var(--accent-cyan)', fontFamily: 'Orbitron, monospace' }}>{utcTime}</span>
-        <span style={{ fontSize: '13px', color: 'var(--text-muted)' }}>{utcDate}</span>
+        <span style={{ fontSize: '14px', color: 'var(--accent-cyan)', fontWeight: '600', minWidth: '36px' }}>UTC</span>
+        <span style={{ 
+          fontSize: '28px', 
+          fontWeight: '700', 
+          color: 'var(--accent-cyan)', 
+          fontFamily: 'Orbitron, monospace',
+          fontVariantNumeric: 'tabular-nums',
+          minWidth: '120px',
+          textAlign: 'right'
+        }}>{utcTime}</span>
+        <span style={{ fontSize: '13px', color: 'var(--text-muted)', minWidth: '110px' }}>{utcDate}</span>
       </div>
       
       {/* Local Clock - Clickable to toggle 12/24 hour format */}
@@ -56,34 +64,42 @@ export const Header = ({
         onClick={onTimeFormatToggle}
         title={`Click to switch to ${use12Hour ? '24-hour' : '12-hour'} format`}
       >
-        <span style={{ fontSize: '14px', color: 'var(--accent-amber)', fontWeight: '600' }}>LOCAL</span>
-        <span style={{ fontSize: '28px', fontWeight: '700', color: 'var(--accent-amber)', fontFamily: 'Orbitron, monospace' }}>{localTime}</span>
-        <span style={{ fontSize: '13px', color: 'var(--text-muted)' }}>{localDate}</span>
+        <span style={{ fontSize: '14px', color: 'var(--accent-amber)', fontWeight: '600', minWidth: '50px' }}>LOCAL</span>
+        <span style={{ 
+          fontSize: '28px', 
+          fontWeight: '700', 
+          color: 'var(--accent-amber)', 
+          fontFamily: 'Orbitron, monospace',
+          fontVariantNumeric: 'tabular-nums',
+          minWidth: '120px',
+          textAlign: 'right'
+        }}>{localTime}</span>
+        <span style={{ fontSize: '13px', color: 'var(--text-muted)', minWidth: '110px' }}>{localDate}</span>
       </div>
       
       {/* Weather & Solar Stats */}
       <div style={{ display: 'flex', gap: '20px', fontSize: '14px' }}>
         {localWeather?.data && (
-          <div title={`${localWeather.data.description} • Wind: ${localWeather.data.windSpeed} mph`}>
+          <div title={`${localWeather.data.description} • Wind: ${localWeather.data.windSpeed} mph`} style={{ minWidth: '90px' }}>
             <span style={{ marginRight: '4px' }}>{localWeather.data.icon}</span>
-            <span style={{ color: 'var(--accent-cyan)', fontWeight: '600' }}>
+            <span style={{ color: 'var(--accent-cyan)', fontWeight: '600', fontVariantNumeric: 'tabular-nums' }}>
               {localWeather.data.temp}°F / {Math.round((localWeather.data.temp - 32) * 5/9)}°C
             </span>
           </div>
         )}
-        <div>
+        <div style={{ minWidth: '55px' }}>
           <span style={{ color: 'var(--text-muted)' }}>SFI </span>
-          <span style={{ color: 'var(--accent-amber)', fontWeight: '700', fontSize: '16px' }}>{spaceWeather?.data?.solarFlux || '--'}</span>
+          <span style={{ color: 'var(--accent-amber)', fontWeight: '700', fontSize: '16px', fontVariantNumeric: 'tabular-nums' }}>{spaceWeather?.data?.solarFlux || '--'}</span>
         </div>
-        <div>
+        <div style={{ minWidth: '35px' }}>
           <span style={{ color: 'var(--text-muted)' }}>K </span>
-          <span style={{ color: parseInt(spaceWeather?.data?.kIndex) >= 4 ? 'var(--accent-red)' : 'var(--accent-green)', fontWeight: '700', fontSize: '16px' }}>
+          <span style={{ color: parseInt(spaceWeather?.data?.kIndex) >= 4 ? 'var(--accent-red)' : 'var(--accent-green)', fontWeight: '700', fontSize: '16px', fontVariantNumeric: 'tabular-nums' }}>
             {spaceWeather?.data?.kIndex ?? '--'}
           </span>
         </div>
-        <div>
+        <div style={{ minWidth: '55px' }}>
           <span style={{ color: 'var(--text-muted)' }}>SSN </span>
-          <span style={{ color: 'var(--accent-cyan)', fontWeight: '700', fontSize: '16px' }}>{spaceWeather?.data?.sunspotNumber || '--'}</span>
+          <span style={{ color: 'var(--accent-cyan)', fontWeight: '700', fontSize: '16px', fontVariantNumeric: 'tabular-nums' }}>{spaceWeather?.data?.sunspotNumber || '--'}</span>
         </div>
       </div>