Fixed the transaction hash overlap in the blob page (#561)

* fix(web): fixed the transaction hash overlap in the blob page * chore: add changeset
Blobscan · Sep 20, 2024 · 9b6847f · 9b6847f
1 parent 5da3ef9
commit 9b6847f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/rare-candles-scream.md b/.changeset/rare-candles-scream.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Fixed the transaction hash overlap in the blob page
diff --git a/apps/web/src/pages/blob/[hash].tsx b/apps/web/src/pages/blob/[hash].tsx
@@ -136,14 +136,17 @@ const Blob: NextPage = function () {
     detailsFields.push({
       name: "Transactions and Blocks",
       value: (
-        <div className="grid w-full grid-cols-3 gap-y-3 md:grid-cols-3">
+        <div className="grid w-full grid-cols-3 gap-x-6 gap-y-3">
           {blob.transactions.map(({ hash: txHash, blockNumber }) => (
             <Fragment key={`${txHash}-${blockNumber}`}>
-              <div className="col-span-2 flex gap-1 md:col-span-2">
+              <div className="col-span-2 flex gap-1">
                 <div className="text-contentSecondary-light dark:text-contentSecondary-dark">
                   Tx{" "}
                 </div>
-                <div className="flex items-center gap-2">
+                <div
+                  className="flex items-center gap-2 truncate"
+                  title={txHash}
+                >
                   {<Link href={buildTransactionRoute(txHash)}>{txHash}</Link>}
                   <CopyToClipboard value={txHash} label="Copy tx hash" />
                 </div>