Tweak copyable ID UX

- don't keep the tooltip open when hovering over it
- offset the tooltip to the right, so it doesn't overlap with other
  content
- tweak colors so it pops out of the background more
- tweak elevation shadows to stand out more
- don't show node ID DID in popover

public/elevations.css

@@ -1,7 +1,7 @@
 :root {
-  --elevation-low: 0 0 64px 0 #00000099;
+  --elevation-low: 0 0 48px 0 #000000ee;
 }
 
 [data-theme="light"] {
-  --elevation-low: 0 0 64px 0 #0000001a;
+  --elevation-low: 0 0 16px 0 #00000022;
 }

src/components/Id.svelte

@@ -12,11 +12,10 @@
   export let clipboard: string = id;
   export let shorten: boolean = true;
   export let style: "oid" | "commit" | "none" = "oid";
-  export let subject: string | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
 
   let icon: ComponentProps<IconSmall>["name"] = "clipboard";
-  const text = subject ? `Click to copy ${subject}` : "Click to copy";
+  const text = "Click to copy";
   let tooltip = text;
 
   const restoreIcon = debounce(() => {
@@ -47,24 +46,24 @@
   }
   .popover {
     position: absolute;
-    bottom: 1.5rem;
+    left: 1rem;
-    left: 0;
     display: flex;
     align-items: center;
     flex-direction: row;
     gap: 0.5rem;
     justify-content: center;
     z-index: 20;
-    background: var(--color-background-float);
+    bottom: 1.5rem;
-    color: var(--color-foreground-default);
+    background: var(--color-fill-ghost);
-    border: 1px solid var(--color-border-hint);
+    color: var(--color-fill-gray);
-    border-radius: var(--border-radius-small);
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--border-radius-tiny);
     box-shadow: var(--elevation-low);
     font-family: var(--font-family-sans-serif);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-regular);
     white-space: nowrap;
-    padding: 0.25rem 0.5rem;
+    padding: 0.125rem 0.5rem;
   }
   .target-commit:hover {
     color: var(--color-foreground-contrast);
@@ -75,42 +74,38 @@
 </style>
 
 <div class="container">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
-    role="button"
-    tabindex="0"
     on:mouseenter={() => {
       setVisible(true);
     }}
     on:mouseleave={() => {
       setVisible(false);
-    }}>
+    }}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    class="target-{style} global-{style}"
-    <div
+    style:cursor="copy"
-      class="target-{style} global-{style}"
+    aria-label={ariaLabel}
-      style:cursor="pointer"
+    on:click={async () => {
-      aria-label={ariaLabel}
+      await copy();
-      on:click={async () => {
+      setVisible(true);
-        await copy();
+    }}
-        setVisible(true);
+    role="button"
-      }}
+    tabindex="0">
-      role="button"
+    <slot>
-      tabindex="0">
+      {#if shorten}
-      <slot>
+        {formatObjectId(id)}
-        {#if shorten}
+      {:else}
-          {formatObjectId(id)}
+        {id}
-        {:else}
+      {/if}
-          {id}
+    </slot>
-        {/if}
-      </slot>
-    </div>
-
-    {#if visible}
-      <div style:position="absolute">
-        <div class="popover">
-          <IconSmall name={icon} />
-          {tooltip}
-        </div>
-      </div>
-    {/if}
   </div>
+
+  {#if visible}
+    <div style:position="absolute">
+      <div class="popover">
+        <IconSmall name={icon} />
+        {tooltip}
+      </div>
+    </div>
+  {/if}
 </div>

src/components/NodeId.svelte

@@ -6,7 +6,6 @@
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
-  export let subject: string = formatNodeId(nodeId);
 </script>
 
 <style>
@@ -25,7 +24,7 @@
   }
 </style>
 
-<Id id={nodeId} {subject} style="none">
+<Id id={nodeId} style="none">
   <div class="avatar-alias">
     <Avatar {nodeId} />
     {#if alias}

src/views/projects/Source/PeerBranchSelector/Peer.svelte

@@ -38,10 +38,7 @@
     <IconButton title="Expand peer" on:click={() => (expanded = !expanded)}>
       <IconSmall name={expanded ? "chevron-down" : "chevron-right"} />
     </IconButton>
-    <NodeId
+    <NodeId nodeId={peer.remote.id} alias={peer.remote.alias} />
-      subject="Node Id"
-      nodeId={peer.remote.id}
-      alias={peer.remote.alias} />
     {#if peer.remote.delegate}
       <Badge size="tiny" variant="delegate">
         <IconSmall name="badge" />