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
This commit is contained in:
daniel-lxs 2025-10-23 17:51:29 -05:00
parent 0ba2389ec7
commit fe0cff5d53
No known key found for this signature in database
GPG key ID: 21C74479048B3AA6

View file

@ -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