From 0d990f3c1eb71b5d132b94f4fa5327834d027bf3 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Wed, 13 Aug 2025 06:57:40 +0000
Subject: [PATCH] fix: improve UI consistency in codebase indexing popover

- Add cursor-pointer class to collapsible section headers for better UX
- Add consistent padding (mb-1 block) between all labels and input fields
- Ensures visual consistency with the rest of the application styling

Fixes #7040
---
 .../src/components/chat/CodeIndexPopover.tsx  | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/webview-ui/src/components/chat/CodeIndexPopover.tsx b/webview-ui/src/components/chat/CodeIndexPopover.tsx
index 4a90a60f3d7..eca8f36d046 100644
--- a/webview-ui/src/components/chat/CodeIndexPopover.tsx
+++ b/webview-ui/src/components/chat/CodeIndexPopover.tsx
@@ -600,7 +600,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 						<div className="mt-4">
 							<button
 								onClick={() => setIsSetupSettingsOpen(!isSetupSettingsOpen)}
-								className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
+								className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none cursor-pointer"
 								aria-expanded={isSetupSettingsOpen}>
 								<span
 									className={`codicon codicon-${isSetupSettingsOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
@@ -613,7 +613,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 								<div className="mt-4 space-y-4">
 									{/* Embedder Provider Section */}
 									<div className="space-y-2">
-										<label className="text-sm font-medium">
+										<label className="text-sm font-medium mb-1 block">
 											{t("settings:codeIndex.embedderProviderLabel")}
 										</label>
 										<Select
@@ -650,7 +650,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 									{currentSettings.codebaseIndexEmbedderProvider === "openai" && (
 										<>
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.openAiKeyLabel")}
 												</label>
 												<VSCodeTextField
@@ -672,7 +672,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.modelLabel")}
 												</label>
 												<VSCodeDropdown
@@ -715,7 +715,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 									{currentSettings.codebaseIndexEmbedderProvider === "ollama" && (
 										<>
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.ollamaBaseUrlLabel")}
 												</label>
 												<VSCodeTextField
@@ -746,7 +746,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.modelLabel")}
 												</label>
 												<VSCodeTextField
@@ -767,7 +767,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.modelDimensionLabel")}
 												</label>
 												<VSCodeTextField
@@ -799,7 +799,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 									{currentSettings.codebaseIndexEmbedderProvider === "openai-compatible" && (
 										<>
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.openAiCompatibleBaseUrlLabel")}
 												</label>
 												<VSCodeTextField
@@ -826,7 +826,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.openAiCompatibleApiKeyLabel")}
 												</label>
 												<VSCodeTextField
@@ -854,7 +854,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.modelLabel")}
 												</label>
 												<VSCodeTextField
@@ -875,7 +875,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.modelDimensionLabel")}
 												</label>
 												<VSCodeTextField
@@ -907,7 +907,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 									{currentSettings.codebaseIndexEmbedderProvider === "gemini" && (
 										<>
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.geminiApiKeyLabel")}
 												</label>
 												<VSCodeTextField
@@ -929,7 +929,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.modelLabel")}
 												</label>
 												<VSCodeDropdown
@@ -972,7 +972,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 									{currentSettings.codebaseIndexEmbedderProvider === "mistral" && (
 										<>
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.mistralApiKeyLabel")}
 												</label>
 												<VSCodeTextField
@@ -994,7 +994,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 											</div>
 
 											<div className="space-y-2">
-												<label className="text-sm font-medium">
+												<label className="text-sm font-medium mb-1 block">
 													{t("settings:codeIndex.modelLabel")}
 												</label>
 												<VSCodeDropdown
@@ -1036,7 +1036,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 
 									{/* Qdrant Settings */}
 									<div className="space-y-2">
-										<label className="text-sm font-medium">
+										<label className="text-sm font-medium mb-1 block">
 											{t("settings:codeIndex.qdrantUrlLabel")}
 										</label>
 										<VSCodeTextField
@@ -1064,7 +1064,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 									</div>
 
 									<div className="space-y-2">
-										<label className="text-sm font-medium">
+										<label className="text-sm font-medium mb-1 block">
 											{t("settings:codeIndex.qdrantApiKeyLabel")}
 										</label>
 										<VSCodeTextField
@@ -1090,7 +1090,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 						<div className="mt-4">
 							<button
 								onClick={() => setIsAdvancedSettingsOpen(!isAdvancedSettingsOpen)}
-								className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
+								className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none cursor-pointer"
 								aria-expanded={isAdvancedSettingsOpen}>
 								<span
 									className={`codicon codicon-${isAdvancedSettingsOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
@@ -1103,7 +1103,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 								<div className="mt-4 space-y-4">
 									{/* Search Score Threshold Slider */}
 									<div className="space-y-2">
-										<div className="flex items-center gap-2">
+										<div className="flex items-center gap-2 mb-1">
 											<label className="text-sm font-medium">
 												{t("settings:codeIndex.searchMinScoreLabel")}
 											</label>
@@ -1149,7 +1149,7 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 
 									{/* Maximum Search Results Slider */}
 									<div className="space-y-2">
-										<div className="flex items-center gap-2">
+										<div className="flex items-center gap-2 mb-1">
 											<label className="text-sm font-medium">
 												{t("settings:codeIndex.searchMaxResultsLabel")}
 											</label>