From bad31ff17ab7a12cd1b51a2d8b6edc68af56c3e4 Mon Sep 17 00:00:00 2001
From: Syco21 <davhv12@gmail.com>
Date: Sat, 16 May 2026 16:42:06 +0200
Subject: [PATCH] Fix departure time layout and column alignment

---
 src/index.css            | 17 +++++++++++++++++
 src/pages/MobileHome.tsx |  5 ++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 04fe691..f0f72ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -560,6 +560,23 @@ header {
   font-weight: 500;
   color: var(--green);
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .mobile-departure-time.delayed { color: var(--yellow); }
+
+.mobile-departure-clock {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: var(--muted);
+  width: 40px;
+  text-align: right;
+}
+
+.mobile-departure-mins {
+  min-width: 54px;
+  text-align: right;
+  white-space: nowrap;
+}
diff --git a/src/pages/MobileHome.tsx b/src/pages/MobileHome.tsx
index 26d8156..7fd556b 100644
--- a/src/pages/MobileHome.tsx
+++ b/src/pages/MobileHome.tsx
@@ -153,7 +153,10 @@ function MobileTransit() {
               </div>
               <div className="mobile-departure-dir">{d.direction}</div>
               <div className={`mobile-departure-time${delayed ? ' delayed' : ''}`}>
-                {formatMinutes(min)}
+                <span className="mobile-departure-clock">
+                  {new Date(d.realtimeTime).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
+                </span>
+                <span className="mobile-departure-mins">{formatMinutes(min)}</span>
               </div>
             </div>
           )