From 5b48385919fd7fbbfefba88bf1d93d4a9e8db92f Mon Sep 17 00:00:00 2001
From: veryevilhuman <@>
Date: Thu, 18 Sep 2025 18:54:41 +0300
Subject: [PATCH] ux: improve responsiveness on small widths for auto-approve
 button - + Add Russian i18n string

---
 .../components/chat/AutoApproveDropdown.tsx   | 23 ++++++++++++++-----
 webview-ui/src/i18n/locales/en/chat.json      |  3 ++-
 webview-ui/src/i18n/locales/ru/chat.json      |  3 ++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/webview-ui/src/components/chat/AutoApproveDropdown.tsx b/webview-ui/src/components/chat/AutoApproveDropdown.tsx
index 08e4a90f6b..914da56dab 100644
--- a/webview-ui/src/components/chat/AutoApproveDropdown.tsx
+++ b/webview-ui/src/components/chat/AutoApproveDropdown.tsx
@@ -173,24 +173,35 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }:
 						"inline-flex items-center gap-1.5 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",
+						"max-[400px]:shrink-0",
 						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,
 					)}>
-					{!effectiveAutoApprovalEnabled ? (
-						<X className="size-3 flex-shrink-0" />
-					) : (
-						<CheckCheck className="size-3 flex-shrink-0" />
-					)}
+					<CheckCheck className="min-[400px]:hidden size-3 flex-shrink-0" />
+					<span className="max-[400px]:hidden">
+						{!effectiveAutoApprovalEnabled ? (
+							<X className="size-3 flex-shrink-0" />
+						) : (
+							<CheckCheck className="size-3 flex-shrink-0" />
+						)}
+					</span>
 
-					<span className="truncate min-w-0">
+					<span className="min-[400px]:inline hidden truncate min-w-0">
 						{!effectiveAutoApprovalEnabled
 							? t("chat:autoApprove.triggerLabelOff")
 							: enabledCount === totalCount
 								? t("chat:autoApprove.triggerLabelAll")
 								: t("chat:autoApprove.triggerLabel", { count: enabledCount })}
 					</span>
+					<span className="min-[400px]:hidden min-w-0">
+						{!effectiveAutoApprovalEnabled
+							? t("chat:autoApprove.triggerLabelOffShort")
+							: enabledCount === totalCount
+								? t("chat:autoApprove.triggerLabelAll")
+								: enabledCount}
+					</span>
 				</PopoverTrigger>
 			</StandardTooltip>
 			<PopoverContent
diff --git a/webview-ui/src/i18n/locales/en/chat.json b/webview-ui/src/i18n/locales/en/chat.json
index d6fb807888..ffb4181b1b 100644
--- a/webview-ui/src/i18n/locales/en/chat.json
+++ b/webview-ui/src/i18n/locales/en/chat.json
@@ -284,7 +284,8 @@
 		"triggerLabel_zero": "0 auto-approve",
 		"triggerLabel_one": "1 auto-approved",
 		"triggerLabel_other": "{{count}} auto-approved",
-		"triggerLabelAll": "YOLO"
+		"triggerLabelAll": "YOLO",
+		"triggerLabelOffShort": "Off"
 	},
 	"announcement": {
 		"title": "🎉 Roo Code {{version}} Released",
diff --git a/webview-ui/src/i18n/locales/ru/chat.json b/webview-ui/src/i18n/locales/ru/chat.json
index 596c2c8e37..c9e7f30253 100644
--- a/webview-ui/src/i18n/locales/ru/chat.json
+++ b/webview-ui/src/i18n/locales/ru/chat.json
@@ -260,7 +260,8 @@
 		"triggerLabel_zero": "0 авто-утвержденных",
 		"triggerLabel_one": "1 авто-утвержден",
 		"triggerLabel_other": "{{count}} авто-утвержденных",
-		"triggerLabelAll": "YOLO"
+		"triggerLabelAll": "YOLO",
+		"triggerLabelOffShort": "Выкл"
 	},
 	"announcement": {
 		"title": "🎉 Выпущен Roo Code {{version}}",