From 31d2983f94f2c474088c70a70e646382090688dc Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 6 Jul 2021 02:00:54 -0300
Subject: [PATCH] Fix truncation

---
 src/TokenTransferItem.tsx | 60 +++++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 64351ee..64a42f6 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -20,32 +20,42 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faCaretRight} size="1x" />
     </span>
-    <span className="font-bold">From</span>
-    <AddressOrENSName address={t.from} />
-    <span className="font-bold">To</span>
-    <AddressOrENSName address={t.to} />
-    <span className="font-bold">For</span>
-    <span>
-      <FormattedBalance
-        value={t.value}
-        decimals={tokenMetas[t.token].decimals}
-      />
-    </span>
-    <span className="flex space-x-1 items-baseline truncate">
-      {tokenMetas[t.token] ? (
-        <>
-          <div className="self-center">
-            <TokenLogo address={t.token} name={tokenMetas[t.token].name} />
-          </div>
-          <AddressLink
-            address={t.token}
-            text={`${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`}
+    <div className="grid grid-cols-5">
+      <div className="flex space-x-2">
+        <span className="font-bold">From</span>
+        <AddressOrENSName address={t.from} />
+      </div>
+      <div className="flex space-x-2">
+        <span className="font-bold">To</span>
+        <AddressOrENSName address={t.to} />
+      </div>
+      <div className="col-span-3 flex space-x-2">
+        <span className="font-bold">For</span>
+        <span>
+          <FormattedBalance
+            value={t.value}
+            decimals={tokenMetas[t.token].decimals}
           />
-        </>
-      ) : (
-        <AddressOrENSName address={t.token} />
-      )}
-    </span>
+        </span>
+        <span className="flex space-x-1 items-baseline truncate">
+          {tokenMetas[t.token] ? (
+            <>
+              <div className="self-center">
+                <TokenLogo address={t.token} name={tokenMetas[t.token].name} />
+              </div>
+              <AddressLink
+                address={t.token}
+                text={`${tokenMetas[t.token].name} (${
+                  tokenMetas[t.token].symbol
+                })`}
+              />
+            </>
+          ) : (
+            <AddressOrENSName address={t.token} />
+          )}
+        </span>
+      </div>
+    </div>
   </div>
 );