diff --git a/apps/client/src/features/control/message/MessageControl.module.scss b/apps/client/src/features/control/message/MessageControl.module.scss
new file mode 100644
index 000000000..427b13344
--- /dev/null
+++ b/apps/client/src/features/control/message/MessageControl.module.scss
@@ -0,0 +1,8 @@
+/* the screen state buttons belong with the preview they act on, not with the message inputs */
+.screenGroup {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $element-inner-spacing;
+}
diff --git a/apps/client/src/features/control/message/MessageControl.tsx b/apps/client/src/features/control/message/MessageControl.tsx
index ecbab07a3..c86bb7c66 100644
--- a/apps/client/src/features/control/message/MessageControl.tsx
+++ b/apps/client/src/features/control/message/MessageControl.tsx
@@ -8,11 +8,15 @@ import InputRow from './InputRow';
 import ScreenControl from './ScreenControl';
 import TimerPreview from './TimerPreview';
 
+import style from './MessageControl.module.scss';
+
 export default function MessageControl() {
   return (
     <>
-      <TimerPreview />
-      <ScreenControl />
+      <div className={style.screenGroup}>
+        <TimerPreview />
+        <ScreenControl />
+      </div>
       <TimerMessageInput />
       <SecondaryInput />
     </>
diff --git a/apps/client/src/features/control/message/MessageControlExport.module.scss b/apps/client/src/features/control/message/MessageControlExport.module.scss
index 1fa4dde5a..90b91bc01 100644
--- a/apps/client/src/features/control/message/MessageControlExport.module.scss
+++ b/apps/client/src/features/control/message/MessageControlExport.module.scss
@@ -18,7 +18,7 @@
 
   display: flex;
   flex-direction: column;
-  gap: $element-spacing;
+  gap: $section-spacing;
   color: $ui-white;
   padding-top: $panel-top-padding;
 }
diff --git a/apps/client/src/features/control/message/TimerPreview.module.scss b/apps/client/src/features/control/message/TimerPreview.module.scss
index aa4c26658..002a8ec3e 100644
--- a/apps/client/src/features/control/message/TimerPreview.module.scss
+++ b/apps/client/src/features/control/message/TimerPreview.module.scss
@@ -1,36 +1,17 @@
-.preview {
-  flex: 1 1 auto;
-  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;
-}
-
 /* the stage is the only elastic element in the panel, the controls below it keep their size */
 .stage {
   flex: 1 1 auto;
   min-height: 3rem;
-  /* keep the height driven frame from growing wider than the panel */
-  max-height: calc(100cqw * 9 / 16);
-  display: grid;
-  place-items: center;
-}
-
-/* the frame is a query container so that the embedded timer scales to the preview, not to the viewport */
-.stageFrame {
   position: relative;
-  container-type: inline-size;
+  /* a query container so that the embedded timer scales to the preview, not to the viewport */
+  container-type: size;
   contain: paint;
   overflow: hidden;
-  aspect-ratio: 16 / 9;
-  height: 100%;
   border-radius: $component-border-radius-md;
 }
 
-/* keep the pop-out affordances reachable above the blackout and message overlays */
-.stageCorners {
+/* editor chrome sits above the blackout and message overlays, so it stays reachable and readable */
+.stageChrome {
   position: absolute;
   inset: 0;
   z-index: calc($zindex-floating + 2);
diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx
index b7f667daa..01f81d922 100644
--- a/apps/client/src/features/control/message/TimerPreview.tsx
+++ b/apps/client/src/features/control/message/TimerPreview.tsx
@@ -11,16 +11,12 @@ export default function TimerPreview() {
   const { data } = useViewSettings();
 
   return (
-    <div className={style.preview}>
-      <div className={style.stage}>
-        <div className={style.stageFrame}>
-          <PipTimer viewSettings={data} />
-          <div className={style.stageCorners}>
-            <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
-          </div>
-        </div>
+    <div className={style.stage}>
+      <PipTimer viewSettings={data} />
+      <div className={style.stageChrome}>
+        <TimerStatus />
+        <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
       </div>
-      <TimerStatus />
     </div>
   );
 }
diff --git a/apps/client/src/features/control/message/TimerStatus.module.scss b/apps/client/src/features/control/message/TimerStatus.module.scss
index 3446e7ef9..97d1250f5 100644
--- a/apps/client/src/features/control/message/TimerStatus.module.scss
+++ b/apps/client/src/features/control/message/TimerStatus.module.scss
@@ -1,5 +1,10 @@
 .timerStatus {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0.5rem 0.25rem;
   display: flex;
+  flex-direction: column;
   gap: 0.25rem;
 }
 
diff --git a/apps/client/src/views/editor/pip-timer/PipTimer.tsx b/apps/client/src/views/editor/pip-timer/PipTimer.tsx
index a8a977947..4756596d2 100644
--- a/apps/client/src/views/editor/pip-timer/PipTimer.tsx
+++ b/apps/client/src/views/editor/pip-timer/PipTimer.tsx
@@ -64,7 +64,9 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
 
   // gather presentation styles
   const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
+  // the estimate is tuned for a 16:9 screen, so cap it by height for containers wider than that
   const timerFontSize = getEstimatedFontSize(display, secondaryContent);
+  const timerFontRule = `min(${timerFontSize}cqw, ${((timerFontSize * 16) / 9).toFixed(2)}cqh)`;
   const userStyles = {
     ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
   };
@@ -82,7 +84,7 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
       <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
         <div
           className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-          style={{ fontSize: `${timerFontSize}cqw` }}
+          style={{ fontSize: timerFontRule }}
           data-phase={time.phase}
         >
           {display}