mirror of
https://github.com/cpvalente/ontime.git
synced 2026-07-26 10:38:55 +00:00
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:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user