fix: on air button could disappear permanently when scrolling just after the on air button is clicked

Author: olzzon

packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx

@@ -86,6 +86,7 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 	} = props
 
 	useEffect(() => {
+		console.log('onAirHover - props.isFollowingOnAir state', props.isFollowingOnAir)
 		if (onAirHover && props.isFollowingOnAir) {
 			setOnAirHover(false)
 		}
@@ -168,19 +169,21 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 				>
 					<RewindAllSegmentsIcon />
 				</button>
-				{!props.isFollowingOnAir && (
-					<button
-						className="status-bar__controls__button"
-						role="button"
-						onMouseEnter={onOnAirMouseEnter}
-						onMouseLeave={onOnAirMouseLeave}
-						onClick={onOnAirClick}
-						tabIndex={0}
-						aria-label={t('Go to On Air Segment')}
-					>
-						{onAirHover ? <Lottie config={ONAIR_OVER} /> : <Lottie config={ONAIR_OUT} />}
-					</button>
-				)}
+				<div>
+					{!props.isFollowingOnAir && (
+						<button
+							className="status-bar__controls__button"
+							role="button"
+							onMouseEnter={onOnAirMouseEnter}
+							onMouseLeave={onOnAirMouseLeave}
+							onClick={onOnAirClick}
+							tabIndex={0}
+							aria-label={t('Go to On Air Segment')}
+						>
+							{onAirHover ? <Lottie config={ONAIR_OVER} /> : <Lottie config={ONAIR_OUT} />}
+						</button>
+					)}
+				</div>
 			</VelocityReact.VelocityTransitionGroup>
 			<VelocityReact.VelocityTransitionGroup
 				enter={{ animation: 'fadeIn', easing: 'ease-out', duration: 250 }}