refactor: vertical titles for small timeline area

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;
 }

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>