Remove chevrons from chat buttons (#7970)

Author: mrubens

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

@@ -1,6 +1,5 @@
 import { useState, useMemo, useCallback } from "react"
 import { Fzf } from "fzf"
-import { ChevronUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
@@ -149,20 +148,14 @@ export const ApiConfigSelector = ({
 					disabled={disabled}
 					data-testid="dropdown-trigger"
 					className={cn(
-						"min-w-0 inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
+						"min-w-0 inline-flex items-center relative whitespace-nowrap px-1.5 py-1 text-xs",
 						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
 						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
 						disabled
 							? "opacity-50 cursor-not-allowed"
 							: "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",
 						triggerClassName,
 					)}>
-					<ChevronUp
-						className={cn(
-							"pointer-events-none opacity-80 flex-shrink-0 size-3 transition-transform duration-200",
-							open && "rotate-180",
-						)}
-					/>
 					<span className="truncate">{displayName}</span>
 				</PopoverTrigger>
 			</StandardTooltip>

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

@@ -167,8 +167,8 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }:
 							: "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",
 						triggerClassName,
 					)}>
-					<CheckCheck className="size-3" />
-					<span className="truncate">
+					<CheckCheck className="size-3 flex-shrink-0" />
+					<span className="truncate min-w-0">
 						{enabledCount === totalCount
 							? t("chat:autoApprove.triggerLabelAll")
 							: t("chat:autoApprove.triggerLabel", { count: enabledCount })}

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

@@ -1100,7 +1100,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								</StandardTooltip>
 							</div>
 
-							<div className="absolute bottom-2 right-2 z-30">
+							<div className="absolute bottom-2 right-2 z-30 flex items-center gap-1">
 								{isEditMode && (
 									<StandardTooltip content={t("chat:cancel.title")}>
 										<button
@@ -1175,12 +1175,12 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				)}
 
 				<div className="flex items-center gap-2">
-					<div className="flex items-center gap-2 min-w-40 overflow-clip flex-1">
+					<div className="flex items-center gap-2 min-w-0 overflow-clip flex-1">
 						<ModeSelector
 							value={mode}
 							title={t("chat:selectMode")}
 							onChange={handleModeChange}
-							triggerClassName="min-w-20 text-ellipsis overflow-hidden"
+							triggerClassName="text-ellipsis overflow-hidden flex-shrink-0"
 							modeShortcutText={modeShortcutText}
 							customModes={customModes}
 							customModePrompts={customModePrompts}
@@ -1191,12 +1191,12 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							disabled={selectApiConfigDisabled}
 							title={t("chat:selectApiConfig")}
 							onChange={handleApiConfigChange}
-							triggerClassName="min-w-16 text-ellipsis overflow-hidden"
+							triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink"
 							listApiConfigMeta={listApiConfigMeta || []}
 							pinnedApiConfigs={pinnedApiConfigs}
 							togglePinnedApiConfig={togglePinnedApiConfig}
 						/>
-						<AutoApproveDropdown triggerClassName="min-w-20 text-ellipsis overflow-hidden" />
+						<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
 					</div>
 					<div className="flex flex-shrink-0 items-center gap-0.5">
 						{isTtsPlaying && (

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Fzf } from "fzf"
-import { ChevronUp, Check, X } from "lucide-react"
+import { Check, X } from "lucide-react"
 
 import { type ModeConfig, type CustomModePrompts, TelemetryEventName } from "@roo-code/types"
 
@@ -198,7 +198,7 @@ export const ModeSelector = ({
 					disabled={disabled}
 					data-testid="mode-selector-trigger"
 					className={cn(
-						"inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
+						"inline-flex items-center relative whitespace-nowrap px-1.5 py-1 text-xs",
 						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
 						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
 						disabled
@@ -209,12 +209,6 @@ export const ModeSelector = ({
 							? "bg-primary opacity-90 hover:bg-primary-hover text-vscode-button-foreground"
 							: null,
 					)}>
-					<ChevronUp
-						className={cn(
-							"pointer-events-none opacity-80 flex-shrink-0 size-3 transition-transform duration-200",
-							open && "rotate-180",
-						)}
-					/>
 					<span className="truncate">{selectedMode?.name || ""}</span>
 				</PopoverTrigger>
 			</StandardTooltip>

webview-ui/src/components/chat/__tests__/ApiConfigSelector.spec.tsx

@@ -86,15 +86,6 @@ describe("ApiConfigSelector", () => {
 		expect(trigger).toHaveTextContent("Config 1")
 	})
 
-	test("renders with ChevronUp icon", () => {
-		render(<ApiConfigSelector {...defaultProps} />)
-
-		const trigger = screen.getByTestId("dropdown-trigger")
-		// Check for the icon by looking for the svg element (ChevronUp from lucide-react renders as svg)
-		const icon = trigger.querySelector("svg")
-		expect(icon).toBeInTheDocument()
-	})
-
 	test("handles disabled state correctly", () => {
 		render(<ApiConfigSelector {...defaultProps} disabled={true} />)