From 97932dfcb5c0304c3501b465c8f2b320976eec6b Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Fri, 21 Jun 2024 21:09:38 +0200
Subject: [PATCH] Align station names with grid

---
 src/routes/journey.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/routes/journey.tsx b/src/routes/journey.tsx
index c29b154..5a274d2 100644
--- a/src/routes/journey.tsx
+++ b/src/routes/journey.tsx
@@ -7,16 +7,22 @@ function TransportConnection({
 }): JSX.Element {
   return (
     <>
-      <p class="flex gap-2 pl-2">
+      <p class="flex pl-2">
+        {/* Setting w-[3rem] and pl-8 to align with grid. TODO find better solution */}
         <Show when={connection.time.change !== undefined}>
           <time
             datetime={connection.time.change}
-            class="content-center text-center text-label-lg text-light-on-surface-variant"
+            class="block w-12 content-center text-center text-label-lg text-light-on-surface-variant"
           >
             {connection.time.change}
           </time>
         </Show>
-        <span class="content-center py-2 text-title-md">
+        <span
+          class="content-center py-2 text-title-md"
+          classList={{
+            [connection.time.change === undefined ? "pl-20" : "pl-8"]: true,
+          }}
+        >
           {connection.start}
         </span>
       </p>
@@ -119,9 +125,10 @@ function Connection3(connection: Connection2): JSX.Element {
             "destination" in connection && connection.destination !== undefined
           }
         >
+          {/* TODO find better solution than pl-[5rem] to align with grid */}
           <p
             data-destination-station
-            class="content-center py-2 pl-2 text-title-md"
+            class="content-center py-2 pl-[5rem] text-title-md"
           >
             Neumarkt, Köln
           </p>
-- 
knotmirror 0.0.1