Added truncation to ID displays

src/views/AccountViewView.vue

@@ -87,16 +87,12 @@
       <h2 class="text-xl font-semibold mb-2">{{ firstName }} {{ lastName }}</h2>
 
       <div class="text-slate-500 text-sm font-bold">ID</div>
-      <div
-        class="text-sm text-slate-500 flex justify-between items-center mb-1"
-      >
-        <span
-          ><code>{{ activeDid }}</code>
-          <button @click="copy(activeDid)">
-            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
+        <code class="truncate">{{ activeDid }}</code>
+        <button @click="copy(activeDid)" class="ml-2">
+          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        </span>
-        <span>
+        <span class="whitespace-nowrap ml-4">
           <button
             class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
           >
@@ -111,33 +107,27 @@
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
-      <div class="text-sm text-slate-500 mb-1">
-        <span>
-          <code>{{ publicBase64 }}</code>
-          <button @click="copy(publicBase64)">
-            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
+        <code class="truncate">{{ publicBase64 }}</code>
+        <button @click="copy(publicBase64)" class="ml-2">
+          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        </span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
-      <div class="text-sm text-slate-500 mb-1">
-        <span>
-          <code>{{ publicHex }}</code>
-          <button @click="copy(publicHex)">
-            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
+        <code class="truncate">{{ publicHex }}</code>
+        <button @click="copy(publicHex)" class="ml-2">
+          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        </span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
-      <div class="text-sm text-slate-500 mb-1">
-        <span
-          ><code>{{ derivationPath }}</code>
-          <button @click="copy(derivationPath)">
-            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
+        <code class="truncate">{{ derivationPath }}</code>
+        <button @click="copy(derivationPath)" class="ml-2">
+          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        </span>
       </div>
     </div>