fix styling issues

taikoxyz · Feb 22, 2024 · 30c6f3d · 30c6f3d
1 parent 11af1cc
commit 30c6f3d
Showing 1 changed file with 21 additions and 20 deletions.
diff --git 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>