From 0e036fbd9f42fd1545d90550919c3dbd76e60a2c Mon Sep 17 00:00:00 2001
From: Chris Estreich <cestreich@gmail.com>
Date: Tue, 18 Mar 2025 23:03:09 -0700
Subject: [PATCH] Clean up SelectDropdown component (#1796)

* Clean up SelectDropdown component

* Fix tests
---
 .../ui/__tests__/select-dropdown.test.tsx     |  7 -----
 .../src/components/ui/select-dropdown.tsx     | 31 +++----------------
 2 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx b/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx
index 24429533e7..f6a52d5ebc 100644
--- a/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx
+++ b/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx
@@ -86,13 +86,6 @@ describe("SelectDropdown", () => {
 		expect(trigger).toHaveAttribute("disabled")
 	})
 
-	it("renders with width: 100% for proper sizing", () => {
-		render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
-
-		const trigger = screen.getByTestId("dropdown-trigger")
-		expect(trigger).toHaveStyle("width: 100%")
-	})
-
 	it("passes the selected value to the trigger", () => {
 		const { rerender } = render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
 
diff --git a/webview-ui/src/components/ui/select-dropdown.tsx b/webview-ui/src/components/ui/select-dropdown.tsx
index 13f9ce1c5c..892d30255f 100644
--- a/webview-ui/src/components/ui/select-dropdown.tsx
+++ b/webview-ui/src/components/ui/select-dropdown.tsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import { CaretUpIcon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
 
@@ -36,7 +37,6 @@ export interface SelectDropdownProps {
 	contentClassName?: string
 	sideOffset?: number
 	align?: "start" | "center" | "end"
-	shouldShowCaret?: boolean
 	placeholder?: string
 	shortcutText?: string
 }
@@ -53,7 +53,6 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 			contentClassName = "",
 			sideOffset = 4,
 			align = "start",
-			shouldShowCaret = true,
 			placeholder = "",
 			shortcutText = "",
 		},
@@ -83,34 +82,14 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 					disabled={disabled}
 					title={title}
 					className={cn(
-						"inline-flex items-center gap-1 relative whitespace-nowrap rounded pr-1.5 py-1.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-vscode-focusBorder",
+						"w-full min-w-0 max-w-full inline-flex items-center gap-1 relative whitespace-nowrap pr-1.5 py-1.5 text-xs outline-none",
 						"bg-transparent border-none text-vscode-foreground w-auto",
-						disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 cursor-pointer hover:opacity-100",
+						disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 hover:opacity-100 cursor-pointer",
 						triggerClassName,
-					)}
-					style={{
-						width: "100%", // Take full width of parent.
-						minWidth: "0",
-						maxWidth: "100%",
-					}}>
-					{shouldShowCaret && (
-						<div className="pointer-events-none opacity-80 flex-shrink-0">
-							<svg
-								fill="none"
-								height="10"
-								stroke="currentColor"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								strokeWidth="2"
-								viewBox="0 0 24 24"
-								width="10">
-								<polyline points="18 15 12 9 6 15" />
-							</svg>
-						</div>
-					)}
+					)}>
+					<CaretUpIcon className="pointer-events-none opacity-80 flex-shrink-0 size-3" />
 					<span className="truncate">{displayText}</span>
 				</DropdownMenuTrigger>
-
 				<DropdownMenuContent
 					align={align}
 					sideOffset={sideOffset}