From fcf03854ff415d266c28929681b5d50081c9a7d8 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Tue, 9 Jun 2026 22:01:07 -0700
Subject: [PATCH] fix tag input wrapping

---
 messages/en-US.json                              |  2 +-
 .../multi-select/multi-select-tag-input.tsx      | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index d78a71855..6ee77a470 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -3549,7 +3549,7 @@
     "sshPrivateKeyDisclaimer": "Your private key is not stored or visible to Pangolin. Alternatively, you can use short-lived certificates for seamless authentication using your existing Pangolin identity.",
     "sshLearnMore": "Learn more",
     "sshPrivateKeyFile": "Private Key File",
-    "sshAuthenticate": "Authenticate",
+    "sshAuthenticate": "Connect",
     "sshTerminate": "Terminate",
     "sshPoweredBy": "Powered by",
     "sshErrorNoTarget": "No target specified",
diff --git a/src/components/multi-select/multi-select-tag-input.tsx b/src/components/multi-select/multi-select-tag-input.tsx
index cb0009a11..bde1a9b05 100644
--- a/src/components/multi-select/multi-select-tag-input.tsx
+++ b/src/components/multi-select/multi-select-tag-input.tsx
@@ -42,16 +42,16 @@ export function MultiSelectTagInput<T extends TagValue>({
                         buttonVariants({
                             variant: "outline"
                         }),
-                        "justify-between w-full inline-flex",
-                        "text-muted-foreground pl-1.5 cursor-text h-9 py-0",
+                        "justify-between w-full flex items-center",
+                        "text-muted-foreground pl-1.5 cursor-text h-auto min-h-9 py-1.5",
+                        "whitespace-normal",
                         "hover:bg-transparent hover:text-muted-foreground",
                         props.disabled && "pointer-events-none opacity-50"
                     )}
                 >
                     <span
                         className={cn(
-                            "inline-flex items-center gap-1 min-w-0 flex-1",
-                            "overflow-x-auto flex-nowrap h-full"
+                            "flex items-center gap-1 min-w-0 flex-1 flex-wrap"
                         )}
                     >
                         {props.value.map((option) => {
@@ -60,15 +60,13 @@ export function MultiSelectTagInput<T extends TagValue>({
                                 <span
                                     key={option.id}
                                     className={cn(
-                                        "bg-muted-foreground/10 font-normal text-foreground rounded-sm flex-none",
-                                        "py-0.5 pl-1.5 pr-0.5 text-xs inline-flex items-center gap-0.5",
+                                        "bg-muted-foreground/10 font-normal text-foreground rounded-sm shrink-0",
+                                        "py-0.5 pl-1.5 pr-0.5 text-xs inline-flex items-center gap-0.5 whitespace-nowrap",
                                         isLocked && "opacity-60"
                                     )}
                                     onClick={(e) => e.stopPropagation()}
                                 >
-                                    <span className="max-w-40 text-ellipsis overflow-hidden">
-                                        {option.text}
-                                    </span>
+                                    <span>{option.text}</span>
                                     {isLocked ? (
                                         <span className="p-0.5 flex-none">
                                             <LockIcon className="size-3" />