cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-27 18:09:10 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix(ui): give the preview a fixed shape and top-align the buttons beside it

Browse Source 
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
This commit is contained in:
Carlos Valente
2026-08-26 13:42:29 +00:00
parent 99f8f4885c
commit 7089abbb53
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/control/message/MessageControl.module.scss
+4 -5
View File
@@ -1,18 +1,17 @@
/* the screen state buttons belong with the preview they act on, not with the message inputs. /* 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 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 { .screenGroup {
flex: 1 1 auto;
min-height: 0;
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-rows: 1fr; align-items: start;
gap: $element-spacing; gap: $element-spacing;
} }
@container (max-width: 22rem) { @container (max-width: 22rem) {
.screenGroup { .screenGroup {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
} }
} }
apps/client/src/features/control/message/ScreenControl.module.scss
-2
View File
@@ -2,7 +2,6 @@
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;
gap: $element-spacing; gap: $element-spacing;
align-self: center;
width: 8rem; width: 8rem;
} }
@@ -10,7 +9,6 @@
.screenControl { .screenControl {
grid-auto-flow: column; grid-auto-flow: column;
grid-auto-columns: 1fr; grid-auto-columns: 1fr;
align-self: stretch;
width: 100%; width: 100%;
} }
} }
apps/client/src/features/control/message/TimerPreview.module.scss
+5 -2
View File
@@ -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 { .stage {
width: 100%;
aspect-ratio: 16 / 9;
min-width: 0; min-width: 0;
min-height: 3rem;
position: relative; position: relative;
/* a query container so that the embedded timer scales to the preview, not to the viewport */ /* a query container so that the embedded timer scales to the preview, not to the viewport */
container-type: size; container-type: size;