Clean up SelectDropdown component

Author: cte

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}