fix(webui): More fixes [copilot]

Author: PeterC89

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

@@ -423,7 +423,7 @@ export class ElementObserverManager {
 	private resizeObserver: ResizeObserver
 	private mutationObserver: MutationObserver
 	private observedElements: Map<HTMLElement, () => void>
-	private pendingReconnectFrame: number | undefined
+	private isMutationObserverActive = false
 
 	private pruneDetachedObservedElements(): void {
 		for (const observedElement of Array.from(this.observedElements.keys())) {
@@ -448,34 +448,59 @@ export class ElementObserverManager {
 			})
 		})
 
-		// Configure MutationObserver
+		// Configure MutationObserver once and only connect/disconnect based on active observed elements.
 		this.mutationObserver = new MutationObserver((mutations) => {
+			if (this.observedElements.size === 0) return
+
 			this.pruneDetachedObservedElements()
 			const targets = new Set<HTMLElement>()
 
 			mutations.forEach((mutation) => {
-				const target = mutation.target as HTMLElement
-				if (!document.contains(target)) return
-				// Find the closest observed element
-				let element = target
+				let element: HTMLElement | null = null
+				if (mutation.target instanceof HTMLElement) {
+					element = mutation.target
+				} else {
+					element = mutation.target.parentElement
+				}
+
+				if (!element || !document.contains(element)) return
+
 				while (element) {
 					if (this.observedElements.has(element)) {
 						targets.add(element)
 						break
 					}
-					if (!element.parentElement) break
 					element = element.parentElement
 				}
 			})
 
-			// Call callbacks for affected elements
 			targets.forEach((element) => {
 				const callback = this.observedElements.get(element)
 				if (callback) callback()
 			})
 		})
 	}
 
+	private ensureMutationObserverConnected(): void {
+		if (this.isMutationObserverActive) return
+		if (this.observedElements.size === 0) return
+		if (!document.body) return
+
+		this.mutationObserver.observe(document.body, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			characterData: true,
+		})
+		this.isMutationObserverActive = true
+	}
+
+	private disconnectMutationObserver(): void {
+		if (!this.isMutationObserverActive) return
+		this.mutationObserver.disconnect()
+		this.isMutationObserverActive = false
+	}
+
 	public static getInstance(): ElementObserverManager {
 		if (!ElementObserverManager.instance) {
 			ElementObserverManager.instance = new ElementObserverManager()
@@ -490,55 +515,18 @@ export class ElementObserverManager {
 
 		this.observedElements.set(element, callback)
 		this.resizeObserver.observe(element)
-		if (!this.pendingReconnectFrame) {
-			this.mutationObserver.observe(element, {
-				childList: true,
-				subtree: true,
-				attributes: true,
-				characterData: true,
-			})
-		}
+		this.ensureMutationObserverConnected()
 	}
 
 	public unobserve(element: HTMLElement): void {
 		if (!element) return
 		this.observedElements.delete(element)
 		this.resizeObserver.unobserve(element)
 		this.pruneDetachedObservedElements()
-		this.mutationObserver.disconnect()
 
 		if (this.observedElements.size === 0) {
-			if (this.pendingReconnectFrame) {
-				window.cancelAnimationFrame(this.pendingReconnectFrame)
-				this.pendingReconnectFrame = undefined
-			}
-			this.mutationObserver.disconnect()
 			this.resizeObserver.disconnect()
-			return
-		}
-
-		if (!this.pendingReconnectFrame) {
-			this.pendingReconnectFrame = window.requestAnimationFrame(() => {
-				this.pendingReconnectFrame = undefined
-
-				// MutationObserver has no per-element unobserve, so we reconnect once per frame.
-				this.pruneDetachedObservedElements()
-
-				if (this.observedElements.size === 0) {
-					this.resizeObserver.disconnect()
-					return
-				}
-
-				this.observedElements.forEach((_, el) => {
-					if (!document.contains(el)) return
-					this.mutationObserver.observe(el, {
-						childList: true,
-						subtree: true,
-						attributes: true,
-						characterData: true,
-					})
-				})
-			})
+			this.disconnectMutationObserver()
 		}
 	}
 }