refactor(timeline): style tweaks on status tags

apps/client/src/views/timeline/Timeline.module.scss

@@ -93,15 +93,28 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
   &[data-status='live'] {
     box-shadow: 0 0.25rem 0 0 $active-red;
     .status {
-      color: $active-red;
+      padding: 0.125rem 0.25rem;
+      border-radius: $component-border-radius-sm;
+      background: $active-red;
+      text-transform: uppercase;
     }
   }
 
   &[data-status='future'] {
     .status {
-      color: $green-500;
+      padding: 0.125rem 0.25rem;
+      border-radius: $component-border-radius-sm;
+      background: $green-500;
     }
   }
+
+  .status {
+    width: fit-content;
+  }
+
+  .status.due {
+    background: $orange-600;
+  }
 }
 
 .delay {

apps/client/src/views/timeline/TimelineEntry.tsx

@@ -150,7 +150,9 @@ function TimelineEntryStatus({
     statusText = getLocalizedString('timeline.due');
   }
 
-  return <div className={style.status}>{statusText}</div>;
+  const isDue = status === 'future' && timeToStart <= 0;
+
+  return <div className={cx([style.status, isDue && style.due])}>{statusText}</div>;
 }
 
 /** Generates a block level progress bar */