From 90690b5285a2fcd5124d13e65094b2114429bbf9 Mon Sep 17 00:00:00 2001
From: William Law <williamlaw.wtl@gmail.com>
Date: Mon, 15 Dec 2025 13:19:43 -0500
Subject: [PATCH] chore: improve UI readability

---
 ui/src/app/block/[hash]/page.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/block/[hash]/page.tsx b/ui/src/app/block/[hash]/page.tsx
index 939d9f7..69f54fc 100644
--- a/ui/src/app/block/[hash]/page.tsx
+++ b/ui/src/app/block/[hash]/page.tsx
@@ -118,14 +118,14 @@ function TransactionRow({
               href={`${BLOCK_EXPLORER_URL}/tx/${tx.hash}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-mono text-sm text-blue-600 hover:underline truncate"
+              className="font-mono text-sm text-blue-600 hover:underline break-all"
               onClick={(e) => e.stopPropagation()}
             >
-              {tx.hash.slice(0, 10)}...{tx.hash.slice(-8)}
+              {tx.hash}
             </a>
           ) : (
-            <span className="font-mono text-sm text-gray-900 truncate">
-              {tx.hash.slice(0, 10)}...{tx.hash.slice(-8)}
+            <span className="font-mono text-sm text-gray-900 break-all">
+              {tx.hash}
             </span>
           )}
           {hasBundle && (
@@ -214,20 +214,20 @@ function BlockStats({ block }: { block: BlockData }) {
       </div>
       <div className="border-t border-gray-100 px-5 py-3 bg-gray-50/50 grid grid-cols-3 gap-4 text-xs">
         <div>
-          <span className="text-gray-500">Gas Used</span>
-          <span className="ml-2 font-medium">
+          <span className="text-black">Gas Used</span>
+          <span className="ml-2 font-medium text-black">
             {block.gasUsed.toLocaleString()}
           </span>
         </div>
         <div>
-          <span className="text-gray-500">Gas Limit</span>
-          <span className="ml-2 font-medium">
+          <span className="text-black">Gas Limit</span>
+          <span className="ml-2 font-medium text-black">
             {block.gasLimit.toLocaleString()}
           </span>
         </div>
         <div>
-          <span className="text-gray-500">Timestamp</span>
-          <span className="ml-2 font-medium">
+          <span className="text-black">Timestamp</span>
+          <span className="ml-2 font-medium text-black">
             {new Date(Number(block.timestamp) * 1000).toLocaleString()}
           </span>
         </div>