From 5e6debcce0a81d6646a46b2fecef85dc4d024298 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 09:21:28 +0000 Subject: [PATCH] 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 Claude-Session: https://claude.ai/code/session_014T6ENZ3r6JXZb1fpYw2oNY --- apps/client/src/views/editor/pip-timer/PipTimer.scss | 6 +++--- apps/client/src/views/timer/Timer.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/client/src/views/editor/pip-timer/PipTimer.scss b/apps/client/src/views/editor/pip-timer/PipTimer.scss index 44d3a1c52..0cdb6eefd 100644 --- a/apps/client/src/views/editor/pip-timer/PipTimer.scss +++ b/apps/client/src/views/editor/pip-timer/PipTimer.scss @@ -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; diff --git a/apps/client/src/views/timer/Timer.scss b/apps/client/src/views/timer/Timer.scss index 5f3b9bf98..7e94b7c66 100644 --- a/apps/client/src/views/timer/Timer.scss +++ b/apps/client/src/views/timer/Timer.scss @@ -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;