From cdc1c16cae0558b28cf0275f034699964413901a Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Wed, 15 Nov 2023 09:39:44 +0100
Subject: [PATCH] fix: On testnet some tokens have no name at all and clicking
 on their copy button looks broken (#570)

---
 src/components/CopyChip.vue          | 31 ++++++++++++++--------------
 src/components/TokenDetailsPanel.vue | 17 +++++++++++----
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/components/CopyChip.vue b/src/components/CopyChip.vue
index e45b328f2..dacedec07 100644
--- a/src/components/CopyChip.vue
+++ b/src/components/CopyChip.vue
@@ -1,21 +1,20 @@
 <template>
-  <div class="copy-chip">
-    <app-chip
-      ref="container"
-      size="sm"
-      :variant="!isCopyAnimationActive ? 'dark' : 'success'">
-      <div class="copy-chip__text">
-        {{ textToDisplay }}
-      </div>
+  <app-chip
+    ref="container"
+    class="copy-chip"
+    size="sm"
+    :variant="!isCopyAnimationActive ? 'dark' : 'success'">
+    <div class="copy-chip__text">
+      {{ textToDisplay }}
+    </div>
 
-      <copy-button
-        v-show="!isCopyAnimationActive"
-        :clipboard-text="clipboardText || label"
-        variant="light"
-        @copy:started="activateCopyAnimation"
-        @copy:ended="deactivateCopyAnimation"/>
-    </app-chip>
-  </div>
+    <copy-button
+      v-show="!isCopyAnimationActive"
+      :clipboard-text="clipboardText || label"
+      variant="light"
+      @copy:started="activateCopyAnimation"
+      @copy:ended="deactivateCopyAnimation"/>
+  </app-chip>
 </template>
 
 <script setup>
diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
index 242852628..e83e49195 100644
--- a/src/components/TokenDetailsPanel.vue
+++ b/src/components/TokenDetailsPanel.vue
@@ -4,10 +4,12 @@
       DETAILS
     </template>
     <template #header>
-      <token-symbol-icon
-        :contract-id="tokenDetails.contractId"
-        class="token-details-panel__icon"/>
-      <copy-chip :label="tokenDetails.symbol"/>
+      <div class="token-details-panel__token">
+        <token-symbol-icon
+          :contract-id="tokenDetails.contractId"
+          class="token-details-panel__icon"/>
+        <copy-chip :label="tokenDetails.symbol"/>
+      </div>
     </template>
 
     <table>
@@ -226,6 +228,7 @@ const marketCap = computed(() =>
   }
 
   &__icon {
+    margin-right: var(--space-1);
     width: 28px;
     height: 28px;
     @media (--desktop) {
@@ -233,5 +236,11 @@ const marketCap = computed(() =>
       height: 24px;
     }
   }
+
+  &__token {
+    display: flex;
+    align-items: center;
+
+  }
 }
 </style>