From 620a22dcb1ce77a9335dff8bbe0546c4c5065b23 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Thu, 22 Feb 2024 12:21:10 +0100
Subject: [PATCH] fix(bridge-ui): transactions view styling  (#15997)

---
 .../Transactions/Transaction.svelte           | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index c00002dece5..c5606a76526 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -92,28 +92,29 @@
   <!-- We disable these warnings as we dynamically add the role -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="flex text-primary-content md:h-[80px] h-[45px] w-full my-[10px] md:my-[0px]">
+  <div class="flex items-center text-primary-content md:h-[80px] h-[45px] w-full my-[10px] md:my-[0px]">
     {#if isDesktopOrLarger}
-      {#if loading}
-        <div class="rounded-[10px] w-[50px] h-[50px] bg-neutral flex items-center justify-center">
-          <Spinner />
-        </div>
-        <div class="f-col text-left space-y-1">
-          <LoadingText mask="&nbsp;" class="min-w-[50px] max-w-[50px] h-4" />
-          <LoadingText mask="&nbsp;" class="min-w-[90px] max-w-[90px] h-4" />
-          <LoadingText mask="&nbsp;" class="min-w-[20px] max-w-[20px] h-4" />
-        </div>
-      {:else}
-        <img alt="nft" src={imgUrl} class="rounded-[10px] min-w-[50px] max-w-[50px] bg-neutral self-center" />
-        <div class="f-col text-left">
-          <div class="text-sm">{token?.name ? truncateString(token?.name, 15) : ''}</div>
-          <div class="text-sm text-secondary-content">
-            {token?.metadata?.name ? truncateString(token?.metadata?.name, 15) : ''}
+      <div class="flex md:w-3/12 gap-[8px]">
+        {#if loading}
+          <div class="rounded-[10px] w-[50px] h-[50px] bg-neutral flex items-center justify-center">
+            <Spinner />
           </div>
-          <div class="text-sm text-secondary-content">{token?.tokenId}</div>
-        </div>
-      {/if}
-
+          <div class="f-col text-left space-y-1">
+            <LoadingText mask="&nbsp;" class="min-w-[50px] max-w-[50px] h-4" />
+            <LoadingText mask="&nbsp;" class="min-w-[90px] max-w-[90px] h-4" />
+            <LoadingText mask="&nbsp;" class="min-w-[20px] max-w-[20px] h-4" />
+          </div>
+        {:else}
+          <img alt="nft" src={imgUrl} class="rounded-[10px] min-w-[50px] max-w-[50px] bg-neutral self-center" />
+          <div class="f-col text-left">
+            <div class="text-sm">{token?.name ? truncateString(token?.name, 15) : 'No Token Name'}</div>
+            <div class="text-sm text-secondary-content">
+              {token?.metadata?.name ? truncateString(token?.metadata?.name, 15) : ''}
+            </div>
+            <div class="text-sm text-secondary-content">{token?.tokenId}</div>
+          </div>
+        {/if}
+      </div>
       <div class="w-2/12 py-2 flex flex-row">
         <ChainSymbolName chainId={item.srcChainId} />
       </div>