From e200a4919ad00bc36aa6a9dbaa37990d9220e83f Mon Sep 17 00:00:00 2001
From: Kaan <92330562+AyazKaan@users.noreply.github.com>
Date: Wed, 30 Jul 2025 12:56:59 +0300
Subject: [PATCH] feat(ui): Make mode selection dropdowns responsive

This PR makes the mode selection dropdowns responsive. It was difficult to select modes with long names and slugs, so this change improves the user experience by making the UI more flexible.
---
 webview-ui/src/components/modes/ModesView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index c2b67bc450c..93a429408a5 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -615,9 +615,9 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 									variant="combobox"
 									role="combobox"
 									aria-expanded={open}
-									className="justify-between w-60"
+									className="justify-between w-full"
 									data-testid="mode-select-trigger">
-									<div>{getCurrentMode()?.name || t("prompts:modes.selectMode")}</div>
+									<div className="truncate">{getCurrentMode()?.name || t("prompts:modes.selectMode")}</div>
 									<ChevronDown className="opacity-50" />
 								</Button>
 							</PopoverTrigger>
@@ -716,7 +716,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 										text: value,
 									})
 								}}>
-								<SelectTrigger className="w-60">
+								<SelectTrigger className="w-full">
 									<SelectValue placeholder={t("settings:common.select")} />
 								</SelectTrigger>
 								<SelectContent>