From 8aaf8e825ca4cc39f8bb10c0f1ef0b58e86429d7 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Fri, 26 Apr 2024 05:09:07 +0200
Subject: [PATCH] Change transaction layout to accommodate large numbers in
 extension

---
 .changelog/2003.trivial.md               |  1 +
 src/app/components/Transaction/index.tsx | 15 +++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changelog/2003.trivial.md

diff --git a/.changelog/2003.trivial.md b/.changelog/2003.trivial.md
new file mode 100644
index 0000000000..fc22f54916
--- /dev/null
+++ b/.changelog/2003.trivial.md
@@ -0,0 +1 @@
+Change transaction layout to accommodate large numbers in extension
diff --git a/src/app/components/Transaction/index.tsx b/src/app/components/Transaction/index.tsx
index 74aa6249d2..f129f444ab 100644
--- a/src/app/components/Transaction/index.tsx
+++ b/src/app/components/Transaction/index.tsx
@@ -61,6 +61,7 @@ type TransactionDictionary = {
 
 const StyledCardBody = styled(CardBody)`
   flex-direction: row;
+  justify-content: space-between;
 
   @media only screen and (min-width: ${({ theme }) =>
       // TODO: extend theme global breakpoints with more breakpoints or at least with 1024px. Requires Sidebar refactor and Grommet lib validation
@@ -428,7 +429,7 @@ export function Transaction(props: TransactionProps) {
         </Text>
       </CardHeader>
       <StyledCardBody margin={{ bottom: 'small' }}>
-        <Box width="75%">
+        <Box>
           {isMobile && (
             <Box pad={{ left: 'small' }}>
               <Text size="16px" margin={{ bottom: 'xsmall' }}>
@@ -443,7 +444,7 @@ export function Transaction(props: TransactionProps) {
           )}
 
           {!isMobile && (
-            <Grid columns={{ count: 'fit', size: 'xsmall' }} gap="none">
+            <Grid columns={{ count: 2, size: 'max-content' }} width="max-content" gap="none">
               <Box pad="none">
                 <InfoBox copyToClipboardValue={otherAddress} icon={ContactInfo} label={destination}>
                   {otherAddress ? (
@@ -483,8 +484,13 @@ export function Transaction(props: TransactionProps) {
             </Grid>
           )}
         </Box>
-        <Box width="25%" align="end" pad={{ right: 'small' }} margin={{ top: 'xsmall' }}>
-          <Text weight="bold" size={isMobile ? 'medium' : 'xlarge'}>
+        <Box pad={{ right: 'small' }}>
+          <Text
+            weight="bold"
+            size={isMobile ? 'medium' : 'xlarge'}
+            margin={{ bottom: 'xsmall' }}
+            textAlign="end"
+          >
             <AmountFormatter amount={transaction.amount!} smallTicker />
           </Text>
           <Text
@@ -501,6 +507,7 @@ export function Transaction(props: TransactionProps) {
             })()}
             size="small"
             weight="bold"
+            textAlign="end"
           >
             {(() => {
               switch (transaction.status) {