diff --git a/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx b/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
index d2fb8606681..a86fa5a6e3b 100644
--- a/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
+++ b/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
@@ -86,7 +86,7 @@ export const CheckpointMenu = ({
 						</Button>
 					</PopoverTrigger>
 				</StandardTooltip>
-				<PopoverContent align="end" container={portalContainer}>
+				<PopoverContent align="end" container={portalContainer || undefined}>
 					<div className="flex flex-col gap-2">
 						{!isCurrent && (
 							<div className="flex flex-col gap-1 group hover:text-foreground">
diff --git a/webview-ui/src/components/ui/hooks/useRooPortal.ts b/webview-ui/src/components/ui/hooks/useRooPortal.ts
index 25ef139e647..2583d883669 100644
--- a/webview-ui/src/components/ui/hooks/useRooPortal.ts
+++ b/webview-ui/src/components/ui/hooks/useRooPortal.ts
@@ -1,10 +1,36 @@
-import { useState } from "react"
-import { useMount } from "react-use"
+import { useState, useEffect } from "react"
 
 export const useRooPortal = (id: string) => {
-	const [container, setContainer] = useState<HTMLElement>()
+	const [container, setContainer] = useState<HTMLElement | null>(null)
 
-	useMount(() => setContainer(document.getElementById(id) ?? undefined))
+	useEffect(() => {
+		// Try to find the element immediately
+		const element = document.getElementById(id)
+		if (element) {
+			setContainer(element)
+			return
+		}
+
+		// If not found, set up a MutationObserver to watch for it
+		const observer = new MutationObserver(() => {
+			const element = document.getElementById(id)
+			if (element) {
+				setContainer(element)
+				observer.disconnect()
+			}
+		})
+
+		// Start observing the document body for changes
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+		})
+
+		// Cleanup
+		return () => {
+			observer.disconnect()
+		}
+	}, [id])
 
 	return container
 }