From 7089abbb531cac8eb77828a6785fb0f2f4f1d969 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Wed, 26 Aug 2026 13:42:29 +0000
Subject: [PATCH] fix(ui): give the preview a fixed shape and top-align the
 buttons beside it

The stage was stretched to whatever height the panel had free via a 1fr grid
row, so its size varied with how much vertical room the editor happened to
leave rather than staying predictable. It now keeps a 16:9 box sized from
its own width - the same ratio the embedded timer's font-size estimate
already assumes - so cqw and cqh agree and the min() cap in PipTimer stays
meaningful only for the pip window, which is still freely resizable.

The button column no longer stretches or centers against that height either:
align-items: start on the group top-aligns both the stage and the buttons
when they sit side by side.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra
---
 .../features/control/message/MessageControl.module.scss  | 9 ++++-----
 .../features/control/message/ScreenControl.module.scss   | 2 --
 .../features/control/message/TimerPreview.module.scss    | 7 +++++--
 3 files changed, 9 insertions(+), 9 deletions(-)

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;