From d5df11a9312161b78413eb117e746f615e9f703f Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Thu, 23 Jan 2025 08:54:47 +0800
Subject: [PATCH] fix: microblock detail UI (#1038)

---
 .env.example                                  | 22 +++++-----
 src/components/MicroblockDetailsPanel.vue     | 43 ++++++++-----------
 .../MicroblockTransactionsTableCondensed.vue  | 11 ++---
 3 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/.env.example b/.env.example
index 822a325bf..542771daa 100644
--- a/.env.example
+++ b/.env.example
@@ -32,30 +32,30 @@ NUXT_PUBLIC_SENTRY_DSN=
 
 # ------ TESTNET ------
 
-# Required
+## Required
 #NUXT_PUBLIC_APP_DOMAIN=localhost:8080
 #NUXT_PUBLIC_MIDDLEWARE_URL=https://testnet.aeternity.io/mdw
 #NUXT_PUBLIC_NODE_URL=https://testnet.aeternity.io
 #NUXT_PUBLIC_WEBSOCKET_URL=wss://testnet.aeternity.io/mdw/v3/websocket
 #NUXT_PUBLIC_NETWORK_NAME=TESTNET
 #NUXT_PUBLIC_NETWORK_ID="ae_uat"
-
-# Alternative network
+#
+## Alternative network
 #NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME="MAINNET"
-
+#
 # DEX
 #NUXT_PUBLIC_DEX_BACKEND_URL=https://dex-backend-testnet.prd.service.aepps.com
 #NUXT_PUBLIC_SH_DEX_CONTRACTS='ct_NhbxN8wg8NLkGuzwRNDQhMDKSKBwDAQgxQawK7tkigi2aC7i9;ct_MLXQEP12MBn99HL6WDaiTqDbG4bJQ3Q9Bzr57oLfvEkghvpFb'
-
-# Smart Contract Verification
+#
+## Smart Contract Verification
 #NUXT_PUBLIC_CONTRACT_VERIFICATION_SERVICE_URL="https://scv-gateway-testnet.dev.service.aepps.com"
-
-# Feature flags
+#
+## Feature flags
 #NUXT_PUBLIC_ENABLE_MARKET_STATS=true
 #NUXT_PUBLIC_ENABLE_NODES=http://138.68.22.27:3113/v2/debug/network
-
-# Other
-#NUXT_PUBLIC_AE_TOKEN_ID=
+#
+## Other
+#NUXT_PUBLIC_AE_TOKEN_ID=ct_JDp175ruWd7mQggeHewSLS1PFXt9AzThCDaFedxon8mF8xTRF
 #NUXT_PUBLIC_DEBUG_MODE=false
 #NUXT_PUBLIC_PLAUSIBLE_URL=
 #NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
diff --git a/src/components/MicroblockDetailsPanel.vue b/src/components/MicroblockDetailsPanel.vue
index f5360589a..2d868236d 100644
--- a/src/components/MicroblockDetailsPanel.vue
+++ b/src/components/MicroblockDetailsPanel.vue
@@ -7,7 +7,7 @@
             <hint-tooltip>
               {{ microblocksHints.microblockId }}
             </hint-tooltip>
-            Microblock ID
+            Hash
           </th>
           <td>
             <div class="u-hidden-mobile">
@@ -56,7 +56,7 @@
             <hint-tooltip>
               {{ microblocksHints.time }}
             </hint-tooltip>
-            Created Height
+            Created
           </th>
           <td>
             <timestamp-label
@@ -94,25 +94,23 @@
             API Links
           </th>
           <td>
-            <div class="microblock-details-panel__container">
-              <app-link
-                :to="microblockNodeUrl"
-                class="microblock-details-panel__link">
-                <app-icon
-                  name="file-cloud"
-                  :size="22"/>
-                Node
-              </app-link>
+            <app-link
+              :to="microblockNodeUrl"
+              class="microblock-details-panel__link">
+              <app-icon
+                name="file-cloud"
+                :size="22"/>
+              Node
+            </app-link>
 
-              <app-link
-                :to="microblockMiddlewareUrl"
-                class="microblock-details-panel__link">
-                <app-icon
-                  name="file-cloud"
-                  :size="22"/>
-                Middleware
-              </app-link>
-            </div>
+            <app-link
+              :to="microblockMiddlewareUrl"
+              class="microblock-details-panel__link">
+              <app-icon
+                name="file-cloud"
+                :size="22"/>
+              Middleware
+            </app-link>
           </td>
         </tr>
       </tbody>
@@ -144,7 +142,6 @@ const microblockMiddlewareUrl = computed(() =>
 .microblock-details-panel {
   &__table-header {
     border-bottom: 1px solid var(--color-midnight-25);
-    font-weight: normal;
 
     @media (--desktop) {
       width: var(--detail-column-width);
@@ -155,10 +152,6 @@ const microblockMiddlewareUrl = computed(() =>
     border-bottom: 0;
   }
 
-  &__container {
-    display: flex;
-  }
-
   &__link {
     display: inline-flex;
     align-items: center;
diff --git a/src/components/MicroblockTransactionsTableCondensed.vue b/src/components/MicroblockTransactionsTableCondensed.vue
index 64c70730b..03992eb55 100644
--- a/src/components/MicroblockTransactionsTableCondensed.vue
+++ b/src/components/MicroblockTransactionsTableCondensed.vue
@@ -32,11 +32,12 @@
           </td>
         </tr>
         <tr class="microblock-transactions-table-condensed__row">
-          <hint-tooltip>
-            {{ microblocksHints.transactionType }}
-          </hint-tooltip>
-          Type
-          <th class="microblock-transactions-table-condensed__header"/>
+          <th class="microblock-transactions-table-condensed__header">
+            <hint-tooltip>
+              {{ microblocksHints.transactionType }}
+            </hint-tooltip>
+            Type
+          </th>
           <td class="microblock-transactions-table-condensed__data">
             <hint-tooltip>
               {{ transactionsHints[transaction.hintKey] }}