From d0881a9979bdba2d518561908c39122554125445 Mon Sep 17 00:00:00 2001
From: Yashvardhan Jagnani <60016972+jagnani73@users.noreply.github.com>
Date: Fri, 1 Mar 2024 00:15:14 +0530
Subject: [PATCH] fix(tx receipt): responsiveness (#135)

Co-authored-by: nguyenlejoe <joe_le.1@hotmail.com>
---
 .../DecodedTransaction/DecodedTransaction.tsx | 19 +++++++++++--------
 .../TransactionReceiptView.tsx                |  4 ++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/Molecules/DecodedTransaction/DecodedTransaction.tsx b/src/components/Molecules/DecodedTransaction/DecodedTransaction.tsx
index 973a5b20..1fdbf6d9 100644
--- a/src/components/Molecules/DecodedTransaction/DecodedTransaction.tsx
+++ b/src/components/Molecules/DecodedTransaction/DecodedTransaction.tsx
@@ -105,10 +105,13 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
                             <p>No decoded Events.</p>
                         ) : (
                             events.map(
-                                ({ name, details, nfts, protocol, tokens }) => (
+                                (
+                                    { name, details, nfts, protocol, tokens },
+                                    i
+                                ) => (
                                     <article
-                                        key={name}
-                                        className="flex w-full flex-col gap-y-4 border-t py-4 first:border-t-0 first:pt-0 last:pb-0"
+                                        key={name + i}
+                                        className="flex w-full flex-col border-t py-4 last:border-b md:gap-y-4"
                                     >
                                         <header className="flex w-full justify-between">
                                             <h3 className="font-medium">
@@ -135,7 +138,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
                                                                 collection_address +
                                                                 token_identifier
                                                             }
-                                                            className="flex gap-x-4"
+                                                            className="flex flex-col gap-x-4 sm:flex-row"
                                                         >
                                                             <figure>
                                                                 <Card className="w-32 overflow-hidden rounded border">
@@ -164,7 +167,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
                                                                 </Card>
                                                             </figure>
 
-                                                            <div className="flex flex-col gap-y-2 truncate text-ellipsis py-2 text-sm text-muted-foreground">
+                                                            <div className="flex flex-col gap-y-2 truncate text-ellipsis py-1 text-sm text-muted-foreground">
                                                                 <div className="flex whitespace-break-spaces font-medium">
                                                                     {handleHashInString(
                                                                         heading
@@ -212,7 +215,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
                                         )}
 
                                         {tokens?.length ? (
-                                            <div className="mt-2 grid grid-cols-3 gap-x-4 gap-y-2">
+                                            <div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
                                                 {tokens.map(
                                                     ({
                                                         heading,
@@ -268,7 +271,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
                                                                     <figure className="ml-2">
                                                                         <TokenAvatar
                                                                             size={
-                                                                                GRK_SIZES.EXTRA_SMALL
+                                                                                GRK_SIZES.EXTRA_EXTRA_SMALL
                                                                             }
                                                                             chain_color={
                                                                                 CHAIN
@@ -304,7 +307,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
                                         )}
 
                                         {details?.length ? (
-                                            <div className="mt-2 grid grid-cols-3 gap-x-4 gap-y-2">
+                                            <div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
                                                 {details.map(
                                                     ({
                                                         heading,
diff --git a/src/components/Organisms/TransactionReceiptView/TransactionReceiptView.tsx b/src/components/Organisms/TransactionReceiptView/TransactionReceiptView.tsx
index eab38ac2..c3e2fd2e 100644
--- a/src/components/Organisms/TransactionReceiptView/TransactionReceiptView.tsx
+++ b/src/components/Organisms/TransactionReceiptView/TransactionReceiptView.tsx
@@ -89,7 +89,7 @@ export const TransactionReceiptView: React.FC<TransactionReceiptViewProps> = ({
                                     </CardDescription>
                                 </div>
 
-                                <div className="flex gap-x-8 border-b pb-4">
+                                <div className="flex flex-col gap-x-8 gap-y-2 md:flex-row">
                                     <div className="flex flex-col">
                                         <CardDescription>
                                             Address
@@ -137,7 +137,7 @@ export const TransactionReceiptView: React.FC<TransactionReceiptViewProps> = ({
                             <></>
                         ) : (
                             <>
-                                <div className="flex flex-col gap-y-2 border-t pt-4">
+                                <div className="flex flex-col gap-y-2">
                                     <div>
                                         <CardDescription>
                                             Transaction Fee