From fe0cff5d53a0d3b64bf7048dbdb69c51a5bbae19 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Thu, 23 Oct 2025 17:51:29 -0500
Subject: [PATCH] fix: correct Tailwind class order for responsive display

- Changed from 'min-[300px]:inline hidden' to 'hidden min-[300px]:inline'
- Changed from 'min-[300px]:hidden' to 'inline min-[300px]:hidden'
- This ensures proper responsive behavior: compact view on screens < 300px, full view otherwise
---
 .../components/chat/AutoApproveDropdown.tsx   | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/webview-ui/src/components/chat/AutoApproveDropdown.tsx b/webview-ui/src/components/chat/AutoApproveDropdown.tsx
index 914da56dab..1fbe8cc0db 100644
--- a/webview-ui/src/components/chat/AutoApproveDropdown.tsx
+++ b/webview-ui/src/components/chat/AutoApproveDropdown.tsx
@@ -173,29 +173,26 @@ 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",
+						"max-[300px]: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,
 					)}>
-					<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>
+					{!effectiveAutoApprovalEnabled ? (
+						<X className="size-3 flex-shrink-0" />
+					) : (
+						<CheckCheck className="size-3 flex-shrink-0" />
+					)}
 
-					<span className="min-[400px]:inline hidden truncate min-w-0">
+					<span className="hidden min-[300px]:inline 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">
+					<span className="inline min-[300px]:hidden min-w-0">
 						{!effectiveAutoApprovalEnabled
 							? t("chat:autoApprove.triggerLabelOffShort")
 							: enabledCount === totalCount