fix: Token details layout breaks with no extensions (#399)

aeternity · Jul 26, 2023 · 90d84dd · 90d84dd
1 parent bc87624
commit 90d84dd
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
@@ -97,14 +97,21 @@
               {{ tokensHints.extensions }}
             </hint-tooltip>
           </th>
-          <td class="token-details-panel__data token-details-panel__data--extensions">
-            <app-chip
-              v-for="extension in tokenDetails.extensions"
-              :key="extension"
-              size="sm"
-              class="token-details-panel__chip">
-              {{ extension }}
-            </app-chip>
+          <td class="token-details-panel__data">
+            <div
+              v-if="!!tokenDetails.extensions.length"
+              class="token-details-panel__extensions">
+              <app-chip
+                v-for="extension in tokenDetails.extensions"
+                :key="extension"
+                size="sm"
+                class="token-details-panel__chip">
+                {{ extension }}
+              </app-chip>
+            </div>
+            <template v-else>
+              N/A
+            </template>
           </td>
         </tr>
         <tr class="token-details-panel__row">
@@ -231,13 +238,13 @@ const tokenPrice = computed(() =>
 
   &__data {
     text-align: right;
+  }
 
-    &--extensions {
-      display: flex;
-      flex-wrap: wrap;
-      row-gap: var(--space-1);
-      justify-content: flex-end;
-    }
+  &__extensions {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: var(--space-1);
+    justify-content: flex-end;
   }
 
   &__row:last-of-type &__table-header {