From c73608228cf964a63425549ae77298f88cb4799d Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 5 Dec 2024 05:25:32 -0800
Subject: [PATCH] Add truncation to displayed IP in CopyableIp

---
 app/ui/lib/CopyableIp.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/ui/lib/CopyableIp.tsx b/app/ui/lib/CopyableIp.tsx
index 291860f2b1..61201b155b 100644
--- a/app/ui/lib/CopyableIp.tsx
+++ b/app/ui/lib/CopyableIp.tsx
@@ -8,10 +8,10 @@
 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"
@@ -19,7 +19,7 @@ export const CopyableIp = ({ ip, isLinked = true }: { ip: string; isLinked?: boo
         {ip}
       </a>
     ) : (
-      ip
+      <span className="truncate">{ip}</span>
     )}
     <CopyToClipboard text={ip} />
   </span>