fix: director screen rehearsal counter

Author: justandras

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

@@ -17,6 +17,12 @@ $hold-status-color: $liveline-timecode-color;
 	font-family: Roboto Flex;
 	font-style: normal;
 
+	// Over/under timer overlay (reuses `screen-timing-clock` from prompter view)
+	// Ensure it layers above the fixed top bar.
+	.screen-timing-clock {
+		z-index: 2000;
+	}
+
 	.director-screen__top {
 		position: fixed;
 		top: 0;
@@ -35,24 +41,19 @@ $hold-status-color: $liveline-timecode-color;
 		padding: 0 0.2em;
 		text-transform: uppercase;
 
-		.director-screen__top__planned-end {
-			text-align: left;
+		.director-screen__top__spacer {
+			flex-grow: 4;
 		}
 
-		.director-screen__top__time-to {
-			text-align: center;
+		.director-screen__top__planned-end {
+			flex-grow: 2;
+			text-align: left;
 		}
 
+		.director-screen__top__center,
 		.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__body {

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

@@ -41,46 +41,44 @@ export function DirectorScreenTop({
 	const { t } = useTranslation()
 
 	return (
-		<div className="director-screen__top">
-			{expectedEnd ? (
-				<div className="director-screen__top__planned-end">
-					<div>
-						<PlannedEndComponent value={expectedEnd} />
+		<>
+			<div className="director-screen__top">
+				{expectedEnd ? (
+					<div className="director-screen__top__planned-end">
+						<div>
+							<PlannedEndComponent value={expectedEnd} />
+						</div>
+						{t('Planned End')}
 					</div>
-					{t('Planned End')}
-				</div>
-			) : null}
-			{expectedEnd && expectedEnd > now ? (
-				<div className="director-screen__top__time-to director-screen__top__planned-container">
-					<div>
-						<TimeToPlannedEndComponent value={now - expectedEnd} />
+				) : null}
+				{expectedEnd && expectedEnd > now ? (
+					<div className="director-screen__top__time-to director-screen__top__planned-container director-screen__top__center">
+						<div>
+							<TimeToPlannedEndComponent value={now - expectedEnd} />
+						</div>
+						<span className="director-screen__top__planned-to director-screen__top__center">
+							{rehearsalInProgress ? t('Time to rehearsal end') : t('Time to planned end')}
+						</span>
 					</div>
-					<span className="director-screen__top__planned-to">
-						{rehearsalInProgress ? t('Time to rehearsal end') : t('Time to planned end')}
-					</span>
-				</div>
-			) : (
-				<div>
-					<div className="director-screen__top__planned-container">
-						<TimeSincePlannedEndComponent
-							value={
-								rehearsalInProgress
-									? (partInstanceToCountTimeFrom?.timings?.take || 0) + expectedDuration - now
-									: getCurrentTime() - (expectedStart + expectedDuration)
-							}
-						/>
-						<span className="director-screen__top__planned-since">
+				) : (
+					<div className="director-screen__top__planned-container director-screen__top__center">
+						<div>
+							<TimeSincePlannedEndComponent
+								value={
+									rehearsalInProgress
+										? (partInstanceToCountTimeFrom?.timings?.take || 0) + expectedDuration - now
+										: getCurrentTime() - (expectedStart + expectedDuration)
+								}
+							/>
+						</div>
+						<span className="director-screen__top__planned-since director-screen__top__center">
 							{rehearsalInProgress ? t('Time since rehearsal end') : t('Time since planned end')}
 						</span>
 					</div>
-				</div>
-			)}
-			<div>
-				<div>
-					<OverUnderTimer containerClassName="counter-component__over-under" valueMs={overUnderClock} />
-				</div>
-				<span className="director-screen__top__over-under">{t('Over/Under')}</span>
+				)}
+				<div className="director-screen__top__spacer"></div>
 			</div>
-		</div>
+			<OverUnderTimer className="screen-timing-clock heavy-light heavy" valueMs={overUnderClock} />
+		</>
 	)
 }