From d3208654eceea1682e79c7c1ced45912f9012c08 Mon Sep 17 00:00:00 2001
From: lyc8503 <me@lyc8503.net>
Date: Tue, 23 Sep 2025 00:46:48 +0800
Subject: [PATCH] css grid to align date text

---
 components/MaintenanceAlert.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/MaintenanceAlert.tsx b/components/MaintenanceAlert.tsx
index 6885434..cf2c4be 100644
--- a/components/MaintenanceAlert.tsx
+++ b/components/MaintenanceAlert.tsx
@@ -53,10 +53,26 @@ export default function MaintenanceAlert({
             : { marginBottom: 8 }),
         }}
       >
-        <b>{upcoming ? 'Scheduled for' : 'From'}:</b> {new Date(maintenance.start).toLocaleString()}
-        <br />
-        <b>{upcoming ? 'Expected end' : 'To'}:</b>{' '}
-        {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
+        <div 
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr',
+            gridColumnGap: '3px',
+          }}
+        >
+          <div style={{ textAlign: 'right', fontWeight: 'bold' }}>
+            {upcoming ? 'Scheduled for:' : 'From:'}
+          </div>
+          <div>
+            {new Date(maintenance.start).toLocaleString()}
+          </div>
+          <div style={{ textAlign: 'right', fontWeight: 'bold' }}>
+            {upcoming ? 'Expected end:' : 'To:'}
+          </div>
+          <div>
+            {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
+          </div>
+        </div>
       </div>
 
       <Text style={{ paddingTop: '3px', whiteSpace: 'pre-line' }}>{maintenance.body}</Text>