From 1974570c01b64bfc4b14def47797b4dee4a0b57d Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 30 Mar 2023 17:10:13 +0800
Subject: [PATCH] Added truncation to ID displays

---
 src/views/AccountViewView.vue | 52 ++++++++++++++---------------------
 1 file changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 5135253..ba1d83c 100644
--- a/src/views/AccountViewView.vue
+++ b/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>
-          </button>
-        </span>
-        <span>
+      <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 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>
-          </button>
-        </span>
+      <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>
       </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>
-          </button>
-        </span>
+      <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>
       </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>
-          </button>
-        </span>
+      <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>
       </div>
     </div>