Change transaction layout to accommodate large numbers in extension

oasisprotocol · Jul 15, 2024 · 8aaf8e8 · 8aaf8e8
1 parent 8d49242
commit 8aaf8e8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/.changelog/2003.trivial.md 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
@@ -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) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Change transaction layout to accommodate large numbers in extension