From 7e3a9d634b38a5a09e9a64a264b563015e1e4b75 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Wed, 1 Apr 2026 08:40:59 +0200
Subject: [PATCH] refactor: vertical titles for small timeline area

---
 .../src/views/timeline/Timeline.module.scss     | 17 +++++++++++++++++
 .../client/src/views/timeline/TimelineEntry.tsx |  5 +++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/views/timeline/Timeline.module.scss b/apps/client/src/views/timeline/Timeline.module.scss
index 699c28fcc..0d8ecc7a2 100644
--- a/apps/client/src/views/timeline/Timeline.module.scss
+++ b/apps/client/src/views/timeline/Timeline.module.scss
@@ -54,6 +54,15 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
   .content {
     gap: 0rem;
     writing-mode: vertical-rl;
+    align-items: start;
+    justify-content: center;
+  }
+
+  .maybeInline {
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+    overflow: hidden;
+    justify-content: center;
   }
 
   .timeOverview {
@@ -117,6 +126,14 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
   }
 }
 
+.title {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
 .delay {
   color: $ontime-delay-text;
 }
diff --git a/apps/client/src/views/timeline/TimelineEntry.tsx b/apps/client/src/views/timeline/TimelineEntry.tsx
index 86492f3b0..eef9da58f 100644
--- a/apps/client/src/views/timeline/TimelineEntry.tsx
+++ b/apps/client/src/views/timeline/TimelineEntry.tsx
@@ -56,7 +56,7 @@ export function TimelineEntry({
   const hasDelay = delay > 0;
 
   const lighterColour = alpha(colour, 0.7);
-  const showTitle = width > 25;
+  const showTitle = width > 20;
   const smallArea = width < 40;
 
   return (
@@ -96,6 +96,7 @@ export function TimelineEntry({
               status={status}
             />
           )}
+          {smallArea && <div className={style.title}>{title}</div>}
         </div>
         {showTitle && (
           <>
@@ -109,7 +110,7 @@ export function TimelineEntry({
                 status={status}
               />
             )}
-            <div>{title}</div>
+            {!smallArea && <div className={style.title}>{title}</div>}
           </>
         )}
       </div>