SF-50 | add responsiveness to director screen

Author: anteeek

packages/webui/src/client/styles/countdown/director.scss

@@ -46,13 +46,15 @@ $hold-status-color: $liveline-timecode-color;
 		.director-screen__top__planned-to {
 			text-align: center;
 		}
-		.director-screen__top__planned-since {
-			margin-left: -50px;
-		}
 
 		.director-screen__top__over-under {
 			margin-left: 5vw;
 		}
+
+		.director-screen__top__planned-container {
+			display: flex;
+			flex-direction: column;
+		}
 	}
 
 	.director-screen__body {
@@ -73,10 +75,7 @@ $hold-status-color: $liveline-timecode-color;
 
 		.director-screen__body__part {
 			display: grid;
-			grid-template:
-				24em
-				80em
-				20em / min(13vw, 27vh) auto;
+			grid-template: 24em 80em 20em / max(13vw, 27vh) auto;
 			white-space: nowrap;
 
 			.director-screen__body__segment-name {
@@ -208,14 +207,14 @@ $hold-status-color: $liveline-timecode-color;
 				text-align: center;
 				width: 100vw;
 				margin-left: -13vw;
-				
+
 				.director-screen__body__part__timeto-name {
 					color: #888;
 					font-size: 9.63em;
 					text-transform: uppercase;
 					margin-top: -2vh;
 				}
-				
+
 				.director-screen__body__part__timeto-countdown {
 					margin-top: 4vh;
 					grid-row: inherit;

packages/webui/src/client/styles/counterComponents.scss

@@ -6,7 +6,7 @@
 .counter-component__over-under {
 	font-family: 'Roboto Flex';
 	font-style: normal;
-	font-size: 7.5rem;
+	font-size: clamp(3rem, 5dvw + 1rem, 7.5rem);
 	font-weight: 500;
 	line-height: 100%;
 	font-feature-settings:

packages/webui/src/client/ui/ClockView/DirectorScreen.tsx

@@ -385,15 +385,15 @@ function DirectorScreenRender({
 						</div>
 					) : null}
 					{expectedEnd ? (
-						<div className="director-screen__top__time-to">
+						<div className="director-screen__top__time-to director-screen__top__planned-container">
 							<div>
 								<TimeToPlannedEndComponent value={now - expectedEnd} />
 							</div>
 							<span className="director-screen__top__planned-to">{t('Time to planned end')}</span>
 						</div>
 					) : (
 						<div>
-							<div>
+							<div className="director-screen__top__planned-container">
 								<TimeSincePlannedEndComponent value={getCurrentTime() - (expectedStart + expectedDuration)} />
 								<span className="director-screen__top__planned-since">{t('Time since planned end')}</span>
 							</div>