refactor: small fixes and style tweaks

fix: prevent reflow on editing images

fix: schedule overview

fix: report on all events

refactor: over-under time colours

fix: prevent edit on delete

apps/client/src/features/overview/composite/TimeElements.module.scss

@@ -55,18 +55,6 @@
   color: $muted-gray;
 }
 
-.offset {
-  color: $muted-gray;
-}
-
-.ahead {
-  color: $playback-ahead;
-}
-
-.behind {
-  color: $ontime-delay-text;
-}
-
 .labelTitle {
   white-space: nowrap;
   overflow: hidden;

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -18,17 +18,18 @@ import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { formatTime, useTimeUntilStart } from '../../../common/utils/time';
 import { calculateEndAndDaySpan, formattedTime } from '../overview.utils';
 
-import { TimeColumn } from './TimeLayout';
+import { OverUnder, TimeColumn } from './TimeLayout';
 
 import style from './TimeElements.module.scss';
 
 export function StartTimes() {
   const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRuntimeOverview();
+
+  const plannedStartText = plannedStart === null ? timerPlaceholder : formatTime(plannedStart);
+
   const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
-
   const [maybeExpectedEnd, maybeExpectedDaySpan] = useMemo(() => calculateEndAndDaySpan(expectedEnd), [expectedEnd]);
-
-  const muted = maybeExpectedEnd === null;
+  const plannedEndText = maybePlannedEnd === null ? timerPlaceholder : formatTime(maybePlannedEnd);
 
   return (
     <div className={style.column}>
@@ -36,31 +37,31 @@ export function StartTimes() {
         <span className={style.label}>Start</span>
         <div className={style.labelledElement}>
           <Tooltip text='Planned start time' render={<TbCalendar className={style.icon} />} />
-          <span className={cx([style.time])}>{formatTime(plannedStart)}</span>
+          <span className={cx([style.time, plannedStart === null && style.muted])}>{plannedStartText}</span>
         </div>
         <div className={style.labelledElement}>
           <Tooltip text='Actual start time' render={<TbCalendarClock className={style.icon} />} />
-          <span className={cx([style.time, muted && style.muted])}>{formattedTime(actualStart)}</span>
+          <span className={cx([style.time, actualStart === null && style.muted])}>{formattedTime(actualStart)}</span>
         </div>
       </div>
       <div className={style.row}>
         <span className={style.label}>End</span>
         <div className={style.labelledElement}>
           <Tooltip text='Planned end time' render={<TbCalendar className={style.icon} />} />
-          {maybePlannedDaySpan >= 0 ? (
+          {maybePlannedDaySpan > 0 ? (
             <Tooltip
               text={`Event spans over ${maybePlannedDaySpan + 1} days`}
               render={<span className={cx([style.time, style.daySpan])} />}
             >
-              {formatTime(maybePlannedEnd)}
+              {plannedEndText}
             </Tooltip>
           ) : (
-            <span className={cx([style.time, muted && style.muted])}>{formatTime(maybePlannedEnd)}</span>
+            <span className={cx([style.time, plannedEnd === null && style.muted])}>{plannedEndText}</span>
           )}
         </div>
         <div className={style.labelledElement}>
           <Tooltip text='Expected end time' render={<TbCalendarStar className={style.icon} />} />
-          {maybeExpectedEnd !== null && maybeExpectedDaySpan >= 0 ? (
+          {maybeExpectedEnd !== null && maybeExpectedDaySpan > 0 ? (
             <Tooltip
               text={`Event spans over ${maybeExpectedDaySpan + 1} days`}
               render={<span className={cx([style.time, style.daySpan])} />}
@@ -68,7 +69,9 @@ export function StartTimes() {
               {formattedTime(maybeExpectedEnd)}
             </Tooltip>
           ) : (
-            <span className={cx([style.time, muted && style.muted])}>{formattedTime(maybeExpectedEnd)}</span>
+            <span className={cx([style.time, maybeExpectedEnd === null && style.muted])}>
+              {formattedTime(maybeExpectedEnd)}
+            </span>
           )}
         </div>
       </div>
@@ -199,11 +202,10 @@ export function OffsetOverview() {
 
   const isPlaying = isPlaybackActive(playback);
   const correctedOffset = offset * -1;
-  const offsetState = getOffsetState(correctedOffset);
-  const offsetClasses = cx([style.offset, offsetState && style[offsetState]]);
+  const offsetState = getOffsetState(offset);
   const offsetText = getOffsetText(isPlaying ? correctedOffset : null);
 
-  return <TimeColumn label='Over / under' value={offsetText} className={offsetClasses} testId='offset' />;
+  return <OverUnder state={offsetState} value={offsetText} testId='offset' />;
 }
 
 export function ClockOverview() {

apps/client/src/features/overview/composite/TimeLayout.module.scss

@@ -22,34 +22,31 @@
   .label {
     line-height: 0.9em;
     width: 7em;
-  }
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 2.25em;
-
-  .label {
-    text-align: right;
-    width: 5em;
+    display: flex;
+    gap: 0.25rem;
   }
 
-  .clock {
-    font-size: 1.25rem;
+  &[data-state="over"] {
+    .label .over {
+      color: $playback-over;
+    }
+    .clock {
+      color: $playback-over;
+    }
+  }
+
+  &[data-state="under"] {
+    .label .under {
+      color: $playback-under;
+    }
+    .clock {
+      color: $playback-under;
+    }
+  }
+
+  &[data-state="muted"] {
+    .clock {
+      color: $muted-gray;
+    }
   }
 }
-
-.daySpan {
-  &::after {
-    content: "*";
-    vertical-align: super;
-    font-size: 0.75em;
-    color: $info-blue;
-  }
-}
-
-.muted {
-  color: $muted-gray;
-}

apps/client/src/features/overview/composite/TimeLayout.tsx

@@ -1,6 +1,3 @@
-import { PropsWithChildren } from 'react';
-
-import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { cx } from '../../../common/utils/styleUtils';
 
 import style from './TimeLayout.module.scss';
@@ -25,40 +22,23 @@ export function TimeColumn({ label, value, muted, className, testId }: TimeLayou
   );
 }
 
-export function TimeRow({ label, value, daySpan, muted, className }: TimeLayoutProps) {
-  return (
-    <div className={style.row}>
-      <span className={style.label}>{label}</span>
-      {daySpan ? (
-        <Tooltip
-          text={`Event spans over ${daySpan + 1} days`}
-          render={<span />}
-          className={cx([style.clock, style.daySpan, className])}
-        >
-          {value}
-        </Tooltip>
-      ) : (
-        <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
-      )}
-    </div>
-  );
+interface OverUnderProps {
+  state: 'over' | 'under' | 'muted' | null;
+  value: string;
+  testId: string;
 }
 
-export function TimeElementsRow({ label, value, daySpan, muted, className }: PropsWithChildren<TimeLayoutProps>) {
+export function OverUnder({ state, value, testId }: OverUnderProps) {
   return (
-    <div className={style.row}>
-      <span className={style.label}>{label}</span>
-      {daySpan ? (
-        <Tooltip
-          text={`Event spans over ${daySpan + 1} days`}
-          render={<span />}
-          className={cx([style.clock, style.daySpan, className])}
-        >
-          {value}
-        </Tooltip>
-      ) : (
-        <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
-      )}
+    <div className={style.column} data-state={state}>
+      <div className={style.label}>
+        <span className={style.over}>Over</span>
+        <span>/</span>
+        <span className={style.under}>Under</span>
+      </div>
+      <span className={style.clock} data-testid={testId}>
+        {value}
+      </span>
     </div>
   );
 }