From 734bbc87ce5c0d3447dfa627b422c1461014d122 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Fri, 5 Sep 2025 12:04:00 +0000
Subject: [PATCH] fix: prevent hover events from bleeding through Code Index
 Config popover

- Added explicit pointer-events handling to PopoverContent component
- Increased z-index from z-50 to z-[100] for better layering
- Added onPointerDownOutside prevention to stop click-through events
- Added inline style for pointer-events auto to ensure proper event blocking

Fixes #7703
---
 webview-ui/src/components/chat/CodeIndexPopover.tsx | 4 +++-
 webview-ui/src/components/ui/popover.tsx            | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/webview-ui/src/components/chat/CodeIndexPopover.tsx b/webview-ui/src/components/chat/CodeIndexPopover.tsx
index 45bf4224a1..088d878dc6 100644
--- a/webview-ui/src/components/chat/CodeIndexPopover.tsx
+++ b/webview-ui/src/components/chat/CodeIndexPopover.tsx
@@ -558,7 +558,9 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 					sideOffset={5}
 					collisionPadding={16}
 					avoidCollisions={true}
-					container={portalContainer}>
+					container={portalContainer}
+					onPointerDownOutside={(e) => e.preventDefault()}
+					style={{ pointerEvents: "auto" }}>
 					<div className="p-3 border-b border-vscode-dropdown-border cursor-default">
 						<div className="flex flex-row items-center gap-1 p-0 mt-0 mb-1 w-full">
 							<h4 className="m-0 pb-2 flex-1">{t("settings:codeIndex.title")}</h4>
diff --git a/webview-ui/src/components/ui/popover.tsx b/webview-ui/src/components/ui/popover.tsx
index acded1d0ad..63809eaf57 100644
--- a/webview-ui/src/components/ui/popover.tsx
+++ b/webview-ui/src/components/ui/popover.tsx
@@ -13,19 +13,20 @@ const PopoverAnchor = PopoverPrimitive.Anchor
 const PopoverContent = React.forwardRef<
 	React.ElementRef<typeof PopoverPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & Pick<PortalProps, "container">
->(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, container, style, ...props }, ref) => (
 	<PopoverPrimitive.Portal container={container}>
 		<PopoverPrimitive.Content
 			ref={ref}
 			align={align}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 w-72 rounded-xs p-4 shadow-xs outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-[100] w-72 rounded-xs p-4 shadow-xs outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				"bg-popover",
 				"border border-vscode-focusBorder",
 				"text-popover-foreground",
 				className,
 			)}
+			style={{ ...style, pointerEvents: "auto" }}
 			{...props}
 		/>
 	</PopoverPrimitive.Portal>