refactor: improve studio clock responsiveness

apps/client/src/theme/_viewerDefs.scss

@@ -42,4 +42,4 @@ $timer-bold-font-family: 'Arial Black', sans-serif; // --font-family-bold-overri
 $external-color: rgba(white, 85%); // --external-color-override
 
 // properties related to the studio clock
-$studio-breakpoint: 1200px;
+$studio-breakpoint: 1300px;

apps/client/src/views/studio/StudioClock.tsx

@@ -1,6 +1,6 @@
 import { Playback } from 'ontime-types';
 
-import { useIsMobileDevice } from '../../common/hooks/useIsMobileDevice';
+import { useIsSmallScreen } from '../../common/hooks/useIsSmallScreen';
 import { useStudioClockSocket } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
 import { formatTime } from '../../common/utils/time';
@@ -18,12 +18,12 @@ interface StudioClockProps {
 }
 
 export default function StudioClock({ hideCards }: StudioClockProps) {
-  const isMobile = useIsMobileDevice();
+  const isSmallScreen = useIsSmallScreen();
   const { clock, playback } = useStudioClockSocket();
   const onAir = playback !== Playback.Stop;
 
   // if we are on mobile and have to show the cards
-  if (isMobile && !hideCards) {
+  if (isSmallScreen && !hideCards) {
     return <StudioClockMobile clock={clock} onAir={onAir} />;
   }
 

apps/client/src/views/studio/StudioTimers.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   gap: $view-element-gap;
-  margin-top: 5%;
+  margin-block: auto;
   font-size: $base-font-size;
 
   .card {