fix: resolve UI issues with checkbox state and popover visibility (#5387)

webview-ui/src/components/chat/CodeIndexPopover.tsx

@@ -32,6 +32,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "@src/components/ui"
+import { useRooPortal } from "@src/components/ui/hooks/useRooPortal"
 import type { EmbedderProvider } from "@roo/embeddingModels"
 import type { IndexingStatus } from "@roo/ExtensionMessage"
 
@@ -284,6 +285,8 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 		return models ? Object.keys(models) : []
 	}
 
+	const portalContainer = useRooPortal("roo-portal")
+
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
 			<PopoverTrigger asChild>{children}</PopoverTrigger>
@@ -294,7 +297,8 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 				side="bottom"
 				sideOffset={5}
 				collisionPadding={16}
-				avoidCollisions={true}>
+				avoidCollisions={true}
+				container={portalContainer}>
 				<div className="mb-4">
 					<h3 className="text-base font-medium mb-2">{t("settings:codeIndex.title")}</h3>
 					<p className="text-sm text-vscode-descriptionForeground">

webview-ui/src/components/settings/ExperimentalSettings.tsx

@@ -85,7 +85,15 @@ export const ExperimentalSettings = ({
 					<div className="flex items-center gap-2">
 						<VSCodeCheckbox
 							checked={codebaseIndexEnabled || false}
-							onChange={(e: any) => setCachedStateField?.("codebaseIndexEnabled", e.target.checked)}>
+							onChange={(e: any) => {
+								const newEnabledState = e.target.checked
+								if (setCachedStateField && codebaseIndexConfig) {
+									setCachedStateField("codebaseIndexConfig", {
+										...codebaseIndexConfig,
+										codebaseIndexEnabled: newEnabledState,
+									})
+								}
+							}}>
 							<span className="font-medium">{t("settings:codeIndex.enableLabel")}</span>
 						</VSCodeCheckbox>
 					</div>

webview-ui/src/components/settings/SettingsView.tsx

@@ -320,8 +320,9 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "updateSupportPrompt", values: customSupportPrompts || {} })
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
-			// Code index config is now handled separately in CodeIndexSettings
-			// vscode.postMessage({ type: "codebaseIndexConfig", values: codebaseIndexConfig })
+			if (codebaseIndexConfig) {
+				vscode.postMessage({ type: "codebaseIndexEnabled", bool: codebaseIndexConfig.codebaseIndexEnabled })
+			}
 			vscode.postMessage({ type: "profileThresholds", values: profileThresholds })
 			setChangeDetected(false)
 		}