Fix spacing and alignment due to addresss highlight feature

src/TokenTransferItem.tsx

@@ -21,20 +21,20 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faCaretRight} size="1x" />
     </span>
-    <div className="grid grid-cols-5">
-      <div className="flex space-x-2">
+    <div className="grid grid-cols-5 gap-x-1">
+      <div className="flex space-x-1">
         <span className="font-bold">From</span>
         <AddressHighlighter address={t.from}>
           <AddressOrENSName address={t.from} />
         </AddressHighlighter>
       </div>
-      <div className="flex space-x-2">
+      <div className="flex space-x-1">
         <span className="font-bold">To</span>
         <AddressHighlighter address={t.to}>
           <AddressOrENSName address={t.to} />
         </AddressHighlighter>
       </div>
-      <div className="col-span-3 flex space-x-2">
+      <div className="col-span-3 flex space-x-1">
         <span className="font-bold">For</span>
         <span>
           <FormattedBalance

src/Transaction.tsx

@@ -209,7 +209,7 @@ const Transaction: React.FC = () => {
                   <Timestamp value={txData.timestamp} />
                 </InfoRow>
                 <InfoRow title="From">
-                  <div className="flex items-baseline space-x-2">
+                  <div className="flex items-baseline space-x-2 -ml-1">
                     <AddressHighlighter address={txData.from}>
                       <AddressOrENSName
                         address={txData.from}
@@ -220,7 +220,7 @@ const Transaction: React.FC = () => {
                   </div>
                 </InfoRow>
                 <InfoRow title="Interacted With (To)">
-                  <div className="flex items-baseline space-x-2">
+                  <div className="flex items-baseline space-x-2 -ml-1">
                     <AddressHighlighter address={txData.to}>
                       <AddressOrENSName
                         address={txData.to}

src/components/InternalTransfer.tsx

@@ -25,36 +25,40 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
       <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
-      <span className="text-gray-500">From</span>
-      <AddressHighlighter address={transfer.from}>
-        <div
-          className={`flex items-baseline space-x-1 ${
-            fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-          }`}
-        >
-          {fromMiner && (
-            <span className="text-yellow-400" title="Miner address">
-              <FontAwesomeIcon icon={faCoins} size="1x" />
-            </span>
-          )}
-          <AddressLink address={transfer.from} />
-        </div>
-      </AddressHighlighter>
-      <span className="text-gray-500">To</span>
-      <AddressHighlighter address={transfer.to}>
-        <div
-          className={`flex items-baseline space-x-1 px-2 py-1 ${
-            toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-          }`}
-        >
-          {toMiner && (
-            <span className="text-yellow-400" title="Miner address">
-              <FontAwesomeIcon icon={faCoins} size="1x" />
-            </span>
-          )}
-          <AddressLink address={transfer.to} />
-        </div>
-      </AddressHighlighter>
+      <div className="flex items-baseline">
+        <span className="text-gray-500">From</span>
+        <AddressHighlighter address={transfer.from}>
+          <div
+            className={`flex items-baseline space-x-1 ${
+              fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+            }`}
+          >
+            {fromMiner && (
+              <span className="text-yellow-400" title="Miner address">
+                <FontAwesomeIcon icon={faCoins} size="1x" />
+              </span>
+            )}
+            <AddressLink address={transfer.from} />
+          </div>
+        </AddressHighlighter>
+      </div>
+      <div className="flex items-baseline">
+        <span className="text-gray-500">To</span>
+        <AddressHighlighter address={transfer.to}>
+          <div
+            className={`flex items-baseline space-x-1 ${
+              toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+            }`}
+          >
+            {toMiner && (
+              <span className="text-yellow-400" title="Miner address">
+                <FontAwesomeIcon icon={faCoins} size="1x" />
+              </span>
+            )}
+            <AddressLink address={transfer.to} />
+          </div>
+        </AddressHighlighter>
+      </div>
     </div>
   );
 };

src/search/ResultHeader.tsx

@@ -15,8 +15,8 @@ const ResultHeader: React.FC<ResultHeaderProps> = ({
     <div>Method</div>
     <div>Block</div>
     <div>Age</div>
-    <div className="col-span-2">From</div>
-    <div className="col-span-2">To</div>
+    <div className="col-span-2 ml-1">From</div>
+    <div className="col-span-2 ml-1">To</div>
     <div className="col-span-2">Value</div>
     <div>
       <button