Refactor/time formatting (#696)

* chore: upgrade related dependencies

* fix: skip sentry on dev

* refactor: unify time formatting

* refactor: display default format for page

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -12,12 +12,6 @@
   justify-items: start;
 }
 
-.timer {
-  grid-area: clk;
-  white-space: nowrap;
-  max-width: 18.75rem;
-}
-
 .indicators {
   grid-area: ind;
   width: 100%;

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -1,12 +1,11 @@
 import { Tooltip } from '@chakra-ui/react';
 import { Playback } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';
 
-import TimerDisplay from '../../../../common/components/timer-display/TimerDisplay';
 import { setPlayback, useTimer } from '../../../../common/hooks/useSocket';
-import { millisToMinutes, millisToSeconds } from '../../../../common/utils/dateConfig';
 import { tooltipDelayMid } from '../../../../ontimeConfig';
 import TapButton from '../tap-button/TapButton';
+import TimerDisplay from '../timer-display/TimerDisplay';
 
 import style from './PlaybackTimer.module.scss';
 
@@ -65,9 +64,7 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
           <div className={hasAddedTime ? style.indDelayActive : style.indDelay} />
         </Tooltip>
       </div>
-      <div className={style.timer}>
-        <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
-      </div>
+      <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
       {isWaiting ? (
         <div className={style.roll}>
           <span className={style.rolltag}>Roll: Countdown to start</span>