diff --git a/apps/client/src/features/control/message/MessageControl.module.scss b/apps/client/src/features/control/message/MessageControl.module.scss
index 9561340a5..d30f9d65d 100644
--- a/apps/client/src/features/control/message/MessageControl.module.scss
+++ b/apps/client/src/features/control/message/MessageControl.module.scss
@@ -1,18 +1,17 @@
 /* the screen state buttons belong with the preview they act on, not with the message inputs.
    buttons sit in a column to the right of the stage by default; once the container narrows
-   too far for that (e.g. an extracted window resized narrow), they drop into a row below it */
+   too far for that (e.g. an extracted window resized narrow), they drop into a row below it.
+   the group is sized by its content, not stretched - the preview keeps a fixed shape rather
+   than growing to whatever height the panel happens to have free */
 .screenGroup {
-  flex: 1 1 auto;
-  min-height: 0;
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-template-rows: 1fr;
+  align-items: start;
   gap: $element-spacing;
 }
 
 @container (max-width: 22rem) {
   .screenGroup {
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto;
   }
 }
diff --git a/apps/client/src/features/control/message/ScreenControl.module.scss b/apps/client/src/features/control/message/ScreenControl.module.scss
index fae239d69..8966c2301 100644
--- a/apps/client/src/features/control/message/ScreenControl.module.scss
+++ b/apps/client/src/features/control/message/ScreenControl.module.scss
@@ -2,7 +2,6 @@
   display: grid;
   grid-auto-flow: row;
   gap: $element-spacing;
-  align-self: center;
   width: 8rem;
 }
 
@@ -10,7 +9,6 @@
   .screenControl {
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
-    align-self: stretch;
     width: 100%;
   }
 }
diff --git a/apps/client/src/features/control/message/TimerPreview.module.scss b/apps/client/src/features/control/message/TimerPreview.module.scss
index 898ae4785..bcfaecb9d 100644
--- a/apps/client/src/features/control/message/TimerPreview.module.scss
+++ b/apps/client/src/features/control/message/TimerPreview.module.scss
@@ -1,7 +1,10 @@
-/* the stage is the only elastic element in the panel, the controls below it keep their size */
+/* fixed shape, not stretched to whatever height the panel has free - it fills the
+   available width and keeps a 16:9 proportion, which is also what the font size
+   estimate in the embedded timer assumes */
 .stage {
+  width: 100%;
+  aspect-ratio: 16 / 9;
   min-width: 0;
-  min-height: 3rem;
   position: relative;
   /* a query container so that the embedded timer scales to the preview, not to the viewport */
   container-type: size;