From 6253a3ca0593ebd01fa616a90b1ab0dbcc78605d Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Sun, 14 Sep 2025 10:29:36 -0400 Subject: [PATCH 1/2] Remove chevrons from chat buttons --- webview-ui/src/components/chat/ApiConfigSelector.tsx | 9 +-------- webview-ui/src/components/chat/ChatTextArea.tsx | 2 +- webview-ui/src/components/chat/ModeSelector.tsx | 10 ++-------- .../chat/__tests__/ApiConfigSelector.spec.tsx | 9 --------- 4 files changed, 4 insertions(+), 26 deletions(-) diff --git a/webview-ui/src/components/chat/ApiConfigSelector.tsx b/webview-ui/src/components/chat/ApiConfigSelector.tsx index 653bfc39e54..786ad01dff6 100644 --- a/webview-ui/src/components/chat/ApiConfigSelector.tsx +++ b/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,7 +148,7 @@ 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 @@ -157,12 +156,6 @@ export const ApiConfigSelector = ({ : "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer", triggerClassName, )}> - {displayName} diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index b93a6c2a6ba..52409425f99 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -1191,7 +1191,7 @@ export const ChatTextArea = forwardRef( disabled={selectApiConfigDisabled} title={t("chat:selectApiConfig")} onChange={handleApiConfigChange} - triggerClassName="min-w-16 text-ellipsis overflow-hidden" + triggerClassName="min-w-13 text-ellipsis overflow-hidden" listApiConfigMeta={listApiConfigMeta || []} pinnedApiConfigs={pinnedApiConfigs} togglePinnedApiConfig={togglePinnedApiConfig} diff --git a/webview-ui/src/components/chat/ModeSelector.tsx b/webview-ui/src/components/chat/ModeSelector.tsx index 331660143b7..3f843344a22 100644 --- a/webview-ui/src/components/chat/ModeSelector.tsx +++ b/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, )}> - {selectedMode?.name || ""} diff --git a/webview-ui/src/components/chat/__tests__/ApiConfigSelector.spec.tsx b/webview-ui/src/components/chat/__tests__/ApiConfigSelector.spec.tsx index bac66255e43..5b25b3bef46 100644 --- a/webview-ui/src/components/chat/__tests__/ApiConfigSelector.spec.tsx +++ b/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() - - 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() From a406de44c0bb19143352875797adc2542c8f4b1e Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Sun, 14 Sep 2025 12:25:21 -0400 Subject: [PATCH 2/2] Tweak min-width --- webview-ui/src/components/chat/AutoApproveDropdown.tsx | 4 ++-- webview-ui/src/components/chat/ChatTextArea.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/webview-ui/src/components/chat/AutoApproveDropdown.tsx b/webview-ui/src/components/chat/AutoApproveDropdown.tsx index b3176d187c3..86b567e18d3 100644 --- a/webview-ui/src/components/chat/AutoApproveDropdown.tsx +++ b/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, )}> - - + + {enabledCount === totalCount ? t("chat:autoApprove.triggerLabelAll") : t("chat:autoApprove.triggerLabel", { count: enabledCount })} diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index 52409425f99..cdb176ddc0f 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -1100,7 +1100,7 @@ export const ChatTextArea = forwardRef( -
+
{isEditMode && (