fix(ui): make auto approve toggle trigger stay (#7318)

Co-authored-by: daniel-lxs <[email protected]>

Author: elianiva

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

@@ -157,12 +157,31 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 				overflowY: "auto",
 				...style,
 			}}>
+			{isExpanded && (
+				<div className="flex flex-col gap-2 py-4">
+					<div
+						style={{
+							color: "var(--vscode-descriptionForeground)",
+							fontSize: "12px",
+						}}>
+						<Trans
+							i18nKey="chat:autoApprove.description"
+							components={{
+								settingsLink: <VSCodeLink href="#" onClick={handleOpenSettings} />,
+							}}
+						/>
+					</div>
+
+					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
+				</div>
+			)}
+
 			<div
 				style={{
 					display: "flex",
 					alignItems: "center",
 					gap: "8px",
-					padding: isExpanded ? "8px 0" : "2px 0 0 0",
+					padding: "2px 0 0 0",
 					cursor: "pointer",
 				}}
 				onClick={toggleExpanded}>
@@ -215,33 +234,12 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						{displayText}
 					</span>
 					<span
-						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
-						style={{
-							flexShrink: 0,
-							marginLeft: isExpanded ? "2px" : "-2px",
-						}}
+						className={`codicon codicon-chevron-right flex-shrink-0 transition-transform duration-200 ease-in-out ${
+							isExpanded ? "-rotate-90 ml-[2px]" : "rotate-0 -ml-[2px]"
+						}`}
 					/>
 				</div>
 			</div>
-
-			{isExpanded && (
-				<div className="flex flex-col gap-2">
-					<div
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							fontSize: "12px",
-						}}>
-						<Trans
-							i18nKey="chat:autoApprove.description"
-							components={{
-								settingsLink: <VSCodeLink href="#" onClick={handleOpenSettings} />,
-							}}
-						/>
-					</div>
-
-					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
-				</div>
-			)}
 		</div>
 	)
 }