From 9c249494d5765768ee5393f07f3de15a677d91fc Mon Sep 17 00:00:00 2001
From: Dicha Zelianivan Arkana <51877647+elianiva@users.noreply.github.com>
Date: Thu, 8 May 2025 22:44:20 +0700
Subject: [PATCH] fix: properly handle mode name overflow (#3328)

---
 .../src/components/prompts/PromptsView.tsx    | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
index c494387042..b76eebbba0 100644
--- a/webview-ui/src/components/prompts/PromptsView.tsx
+++ b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -571,8 +571,30 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 														}}
 														data-testid={`mode-option-${modeConfig.slug}`}>
 														<div className="flex items-center justify-between w-full">
-															<span>{modeConfig.name}</span>
-															<span className="text-foreground">{modeConfig.slug}</span>
+															<span
+																style={{
+																	whiteSpace: "nowrap",
+																	overflow: "hidden",
+																	textOverflow: "ellipsis",
+																	flex: 2,
+																	minWidth: 0,
+																}}>
+																{modeConfig.name}
+															</span>
+															<span
+																className="text-foreground"
+																style={{
+																	whiteSpace: "nowrap",
+																	overflow: "hidden",
+																	textOverflow: "ellipsis",
+																	direction: "rtl",
+																	textAlign: "right",
+																	flex: 1,
+																	minWidth: 0,
+																	marginLeft: "0.5em",
+																}}>
+																{modeConfig.slug}
+															</span>
 														</div>
 													</CommandItem>
 												))}