fix(ui): make the message preview match the stage it stands in for

Three things measured wrong once the preview showed a real render:

- the pip timer kept leading zeros where the timer view drops them by
  default, so the preview read 00:59:07 against the stage's 59:07 - and its
  own secondary line already dropped them
- the extracted /messagecontrol route has no flex parent for the panel to
  grow into, so the stage collapsed to its minimum instead of filling the
  window
- a tall panel caps the stage at its own width, and the slack it leaves now
  sits either side of the stage rather than all below it

Covers the screen state controls in the e2e spec: the secondary source
select puts the typed text on the stage, blackout reaches the timer view,
and clear screen resets the state while keeping the text.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra

apps/client/src/features/control/message/MessageControlExport.module.scss

@@ -6,6 +6,11 @@
   overflow: hidden;
 }
 
+/* the extracted route has no flex parent to grow into */
+.extractedPanel {
+  height: 100%;
+}
+
 .contentLayout {
   flex: 1;
   min-height: 0;

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

@@ -5,6 +5,7 @@ import ErrorBoundary from '../../../common/components/error-boundary/ErrorBounda
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { cx } from '../../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../../externals';
 import MessageControl from './MessageControl';
 
@@ -16,7 +17,10 @@ function MessageControlExport() {
 
   return (
     <ProtectRoute permission='editor'>
-      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
+      <Editor.Panel
+        className={cx([style.growPanel, isExtracted && style.extractedPanel])}
+        data-testid='panel-messages-control'
+      >
         {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
         {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 

apps/client/src/features/control/message/TimerPreview.module.scss

@@ -3,6 +3,8 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
+  /* the stage caps at the panel width, so centre whatever slack a tall panel leaves */
+  justify-content: center;
   gap: $element-inner-spacing;
 }
 

apps/client/src/views/editor/pip-timer/PipTimer.tsx

@@ -41,9 +41,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
   // gather timer data
   const totalTime = getTotalTime(time.duration, time.addedTime);
   const stageTimer = getTimerByType(false, timerTypeNow, clock, time, timerTypeNow);
+  // match the defaults of the timer view, which is what the preview is standing in for
   const display = getFormattedTimer(stageTimer, timerTypeNow, 'min', {
     removeSeconds: false,
-    removeLeadingZero: false,
+    removeLeadingZero: true,
   });
 
   const currentAux = (() => {