Add truncation to displayed IP in CopyableIp (#2598)

oxidecomputer · Jan 7, 2025 · 48e1b15 · 48e1b15
1 parent d144e7d
commit 48e1b15
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/app/ui/lib/CopyableIp.tsx b/app/ui/lib/CopyableIp.tsx
@@ -8,18 +8,18 @@
 import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
 
 export const CopyableIp = ({ ip, isLinked = true }: { ip: string; isLinked?: boolean }) => (
-  <span className="flex items-center gap-1">
+  <span className="flex max-w-full items-center gap-1">
     {isLinked ? (
       <a
-        className="link-with-underline text-sans-md"
+        className="link-with-underline truncate text-sans-md"
         href={`https://${ip}`}
         target="_blank"
         rel="noreferrer"
       >
         {ip}
       </a>
     ) : (
-      ip
+      <span className="truncate">{ip}</span>
     )}
     <CopyToClipboard text={ip} />
   </span>