fix(webui): More fixes [copilot]

Author: PeterC89

packages/webui/src/client/lib/VirtualElement.tsx

@@ -84,17 +84,14 @@ export function VirtualElement({
 		}
 	}, [])
 
+	const placeholderHeightPx = measurements?.clientHeight ?? placeholderHeight ?? ref?.clientHeight ?? 0
+
 	const styleObj = useMemo<React.CSSProperties>(
 		() => ({
 			width: width ?? 'auto',
-			height: ((placeholderHeight || ref?.clientHeight) ?? '0') + 'px',
-			// These properties are used to ensure that if a prior element is changed from
-			// placeHolder to element, the position of visible elements are not affected.
-			contentVisibility: 'auto',
-			containIntrinsicSize: `0 ${(placeholderHeight || ref?.clientHeight) ?? '0'}px`,
-			contain: 'size layout',
+			height: `${placeholderHeightPx}px`,
 		}),
-		[width, placeholderHeight]
+		[width, placeholderHeightPx]
 	)
 
 	const handleResize = useCallback(() => {
@@ -420,6 +417,13 @@ export class ElementObserverManager {
 	private observedElements: Map<HTMLElement, () => void>
 	private isMutationObserverActive = false
 
+	private hasConnectedObservedElements(): boolean {
+		for (const observedElement of this.observedElements.keys()) {
+			if (document.contains(observedElement)) return true
+		}
+		return false
+	}
+
 	private pruneDetachedObservedElements(): void {
 		for (const observedElement of Array.from(this.observedElements.keys())) {
 			if (!document.contains(observedElement)) {
@@ -448,6 +452,10 @@ export class ElementObserverManager {
 			if (this.observedElements.size === 0) return
 
 			this.pruneDetachedObservedElements()
+			if (this.observedElements.size === 0) {
+				this.disconnectMutationObserver()
+				return
+			}
 			const targets = new Set<HTMLElement>()
 
 			mutations.forEach((mutation) => {
@@ -479,13 +487,12 @@ export class ElementObserverManager {
 	private ensureMutationObserverConnected(): void {
 		if (this.isMutationObserverActive) return
 		if (this.observedElements.size === 0) return
+		if (!this.hasConnectedObservedElements()) return
 		if (!document.body) return
 
 		this.mutationObserver.observe(document.body, {
 			childList: true,
 			subtree: true,
-			attributes: true,
-			characterData: true,
 		})
 		this.isMutationObserverActive = true
 	}
@@ -522,6 +529,14 @@ export class ElementObserverManager {
 		if (this.observedElements.size === 0) {
 			this.resizeObserver.disconnect()
 			this.disconnectMutationObserver()
+			return
 		}
+
+		if (!this.hasConnectedObservedElements()) {
+			this.disconnectMutationObserver()
+			return
+		}
+
+		this.ensureMutationObserverConnected()
 	}
 }

packages/webui/src/client/ui/ClockView/CameraScreen/index.tsx

@@ -149,11 +149,13 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 	useEffect(() => {
 		const getContainerEl = () => document.querySelector('#render-target > .container-fluid')
 		const currentContainerEl = getContainerEl()
-		if (currentContainerEl instanceof HTMLElement) currentContainerEl.classList.remove('header-clear')
+		if (currentContainerEl instanceof HTMLElement && currentContainerEl.isConnected) {
+			currentContainerEl.classList.remove('header-clear')
+		}
 
 		return () => {
 			const cleanupContainerEl = getContainerEl()
-			if (cleanupContainerEl instanceof HTMLElement) {
+			if (cleanupContainerEl instanceof HTMLElement && cleanupContainerEl.isConnected) {
 				cleanupContainerEl.classList.add('header-clear')
 			}
 		}

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.tsx

@@ -96,6 +96,14 @@ export const PreviewPopUp = React.forwardRef<
 		}
 	}, [trackMouse])
 
+	useEffect(() => {
+		return () => {
+			anchorYRef.current = 0
+			virtualElement.current.getBoundingClientRect = generateGetBoundingClientRect(0, 0)
+			updateRef.current = null
+		}
+	}, [])
+
 	useImperativeHandle(ref, () => {
 		return {
 			update: () => {

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -393,6 +393,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 	const [previewSession, setPreviewSession] = useState<PreviewSession | null>(null)
 	const [previewContent, setPreviewContent] = useState<PreviewContentUI[] | null>(null)
 	const [t, setTime] = useState<number | null>(null)
+	const [previewSessionKey, setPreviewSessionKey] = useState(0)
 
 	const closeSession = useCallback(() => {
 		const previousHandle = currentHandle.current
@@ -415,6 +416,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 	const context: IPreviewPopUpContext = {
 		requestPreview: (anchor, content, opts) => {
 			closeSession()
+			setPreviewSessionKey((prev) => prev + 1)
 
 			if (opts?.time) {
 				setTime(opts.time)
@@ -456,6 +458,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 			{children}
 			{previewSession && (
 				<PreviewPopUp
+					key={previewSessionKey}
 					ref={previewRef}
 					anchor={previewSession.anchor}
 					padding={previewSession.padding}