Over under (#771)

* feat: schedule offset

apps/client/src/features/control/message/MessageControl.tsx

@@ -5,6 +5,7 @@ import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline';
 
 import { setMessage, useMessageControl } from '../../../common/hooks/useSocket';
+import { enDash } from '../../../common/utils/styleUtils';
 
 import InputRow from './InputRow';
 
@@ -64,7 +65,7 @@ export default function MessageControl() {
       </div>
       <InputRow
         label='External Message'
-        placeholder='-'
+        placeholder={enDash}
         readonly
         text={message.external.text || ''}
         visible={message.external.visible || false}

apps/client/src/features/control/playback/timer-display/TimerDisplay.tsx

@@ -1,7 +1,7 @@
 import { MaybeNumber } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
-import { cx } from '../../../../common/utils/styleUtils';
+import { cx, timerPlaceholder } from '../../../../common/utils/styleUtils';
 
 import style from './TimerDisplay.module.scss';
 
@@ -11,16 +11,17 @@ interface TimerDisplayProps {
 
 /**
  * Displays time in ms in formatted timetag
+ * Typically used in production views
  */
 export default function TimerDisplay(props: TimerDisplayProps) {
   const { time } = props;
 
   if (time == null) {
-    return <div className={style.timer}>-- : -- : --</div>;
+    return <div className={style.timer}>{timerPlaceholder}</div>;
   }
 
   const isNegative = time < 0;
-  const display = millisToString(Math.abs(time), { fallback: '-- : -- : --' });
+  const display = millisToString(Math.abs(time), { fallback: timerPlaceholder });
   const classes = cx([style.timer, isNegative ? style.finished : null]);
 
   return <div className={classes}>{display}</div>;