Truncate node address and name — radicle-explorer

I wanted to make the node address visible even when it’s truncated so i put it on two lines… seemed important to show the other parts of it, not just the beginning and then truncating the whole rest? not sure if this assuption is true though. i don’t love it on two lines…

   export let node: Node;
   $: clipboard = node.config?.externalAddresses
     ? `${node.id}@${node.config.externalAddresses[0]}`
     : node.id;
   $: externalAddress = node.config?.externalAddresses?.[0];
   $: clipboard = externalAddress ? `${node.id}@${externalAddress}` : node.id;
 </script>
 <div style:word-break="break-word">
   <!--prettier-ignore-->
   <Id ariaLabel="node-id" shorten={false} id={clipboard}>
     {#if node.config?.externalAddresses.length}
       {truncateId(node.id)}@<wbr />{node.config?.externalAddresses[0]}
     {:else}
       {truncateId(node.id)}
     {/if}
 <style>
   .address {
     display: flex;
     flex-direction: column;
     min-width: 0;
     width: 100%;
   }
   .line {
     display: block;
     min-width: 0;
     white-space: nowrap;
   }
   .address-line {
     overflow: hidden;
     text-overflow: ellipsis;
   }
 </style>
 <div class="address">
   <Id
     ariaLabel="node-id"
     shorten={false}
     id={clipboard}
     styleWidth="100%"
     title={clipboard}>
     <div class="address">
       <span class="line">{truncateId(node.id)}</span>
       {#if externalAddress}
         <span class="line address-line">@{externalAddress}</span>
       {/if}
     </div>
   </Id>
 </div>