In the countdown view a user can subscribe to a group and to events
inside it. Once an event within the group started, the auto scroll
pushed the group card above the viewport, losing the context of which
group the running event belongs to. The operator view had the same
problem.
Group and its events are now wrapped in a section, and the group card is
pinned with position sticky, so it stays above the running event however
far down the group that event sits. The follow scroll offsets the sticky
header, and the follow button threshold discounts it so it keeps its
meaning.
A group holding the running event is now marked as active. In the
countdown the card keeps its background and gains a green outline, the
green fill stays reserved for the running event itself. In the operator
the card is already filled with the group colour, so the ring uses the
lighter active indicator over a dark frame to stay legible against any
group colour. Neither state was visible before: .sub--group overrode
both .sub--live and .sub--armed at equal specificity.
Also fixes the countdown handing the same selectedRef to both a group
row and its running child. React detaches refs before attaching them,
so the child unsetting the ref left it null while the group never
re-attached, silently disabling auto scroll.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GjX7D56AW8cL3FXjvtnjtL
* fix: issue where a count-to-end would lead to incorrect expected times
* fix: include add time in overtime when countToEnd
* fix: ui and server use same calculation for expected end
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
Surface {{groupNow.*}} template variables (title, note, colour, times,
custom fields) in the automation template autocomplete so events inside a
group can reference their group. The runtime store already carries
groupNow, so substitution and filters worked already; this makes it
discoverable.
Extend the message-secondary action with an optional text field so an
automation can set the secondary message content, not just its source.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LZYPZVdZLWowU7DyzGkWyy
Claude
Carlos Valente
Alex Christoffer Rasmussen
Carlos Valente