Tighten copy button and tweak overflow style

Author: benjaminleonard

app/components/ExternalIps.tsx

@@ -38,21 +38,21 @@ export function ExternalIps({ project, instance }: PP.Instance) {
   // create a list of CopyableIp components
   const links = ipsToShow.map((eip) => <CopyableIp ip={eip.ip} key={eip.ip} />)
 
-  // if there are more than 2 ips, add a link to the instance networking page
-  if (overflowCount > 0) {
-    links.push(
-      <Link
-        to={pb.instanceNetworking({ project, instance })}
-        className="link-with-underline text-sans-md"
-      >
-        +{overflowCount}
-      </Link>
-    )
-  }
-
   return (
-    <div className="flex max-w-full items-center gap-1">
-      {intersperse(links, <Slash />)}
+    <div className="flex max-w-full items-center">
+      {intersperse(links, <Slash className="ml-0.5 mr-1.5" />)}
+      {/* if there are more than 2 ips, add a link to the instance networking page */}
+      {overflowCount > 0 && (
+        <>
+          <Slash className="ml-0.5 mr-1.5" />
+          <Link
+            to={pb.instanceNetworking({ project, instance })}
+            className="hover:link-with-underline -m-2 self-center p-2 text-tertiary"
+          >
+            …
+          </Link>
+        </>
+      )}
     </div>
   )
 }

app/pages/settings/ProfilePage.tsx

@@ -45,7 +45,7 @@ export function ProfilePage() {
         <PropertiesTable.Row label="Display name">{me.displayName}</PropertiesTable.Row>
         <PropertiesTable.Row label="User ID">
           {me.id}
-          <CopyToClipboard className="ml-2" text={me.id} />
+          <CopyToClipboard className="ml-1" text={me.id} />
         </PropertiesTable.Row>
       </PropertiesTable>
 

app/ui/lib/CopyableIp.tsx

@@ -8,7 +8,7 @@
 import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
 
 export const CopyableIp = ({ ip, isLinked = true }: { ip: string; isLinked?: boolean }) => (
-  <span className="flex max-w-full items-center gap-1">
+  <span className="flex max-w-full items-center gap-0.5">
     {isLinked ? (
       <a
         className="link-with-underline truncate text-sans-md"

app/ui/lib/Slash.tsx

@@ -5,6 +5,10 @@
  *
  * Copyright Oxide Computer Company
  */
-export const Slash = () => (
-  <span className="mx-1 text-quaternary selected:text-accent-disabled">/</span>
+import cn from 'classnames'
+
+export const Slash = ({ className }: { className?: string }) => (
+  <span className={cn('mx-1 text-quaternary selected:text-accent-disabled', className)}>
+    /
+  </span>
 )

app/ui/lib/Truncate.tsx

@@ -33,7 +33,7 @@ export const Truncate = ({
   // Only use the tooltip if the text is longer than maxLength
   return (
     // overflow-hidden required to make inner truncate work
-    <div className="flex items-center space-x-2 overflow-hidden">
+    <div className="flex items-center gap-0.5 overflow-hidden">
       <Tooltip content={text} delay={tooltipDelay}>
         <div aria-label={text} className="truncate">
           {truncate(text, maxLength, position)}