fix(views): center timer digits with flexbox for embedded browser compatibility

The Stage Timer and PiP Timer views relied on `align-content: center` to
vertically center the timer digits inside `.timer-container`, which is a
plain block element. Aligning children of a block container via
`align-content` only works in Chromium 123+ (Firefox 125+, Safari 17.4+).

Embedded browsers such as vMix Browser Input (CEF V115) and other older
CEF/Chromium-based production tools ignore the property, so the digits
fall back to the top of the container while every other element renders
correctly.

Make `.timer-container` a real flex column and center with
`justify-content: center`, which is universally supported and matches the
centering approach used elsewhere in the codebase. The removed
`justify-self`/`align-self` were no-ops on a full-width flex item.

Fixes #2126

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014T6ENZ3r6JXZb1fpYw2oNY
This commit is contained in:
Claude
2026-07-17 09:21:28 +00:00
committed by Carlos Valente
parent c191786e50
commit 5e6debcce0
2 changed files with 6 additions and 6 deletions
@@ -28,9 +28,9 @@
.timer-container {
flex: 1;
align-content: center;
justify-self: center;
align-self: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
overflow: hidden;
+3 -3
View File
@@ -82,9 +82,9 @@
.timer-container {
flex: 1;
align-content: center;
justify-self: center;
align-self: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
overflow: hidden;