fix: column widths on mobile

safe-global · May 29, 2024 · 641b82c · 641b82c
1 parent 8bc4440
commit 641b82c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 23 deletions.
diff --git a/src/components/transactions/BulkTxListGroup/index.tsx b/src/components/transactions/BulkTxListGroup/index.tsx
@@ -18,15 +18,15 @@ const GroupedTxListItems = ({
 
   return (
     <Paper className={css.container}>
-      <Grid container>
-        <Grid item xs={0.5} display="flex" alignItems="center">
+      <Grid container gap={1}>
+        <Grid item xs={1} sm={0.5} display="flex" alignItems="center">
           <SvgIcon className={css.icon} component={BatchIcon} inheritViewBox fontSize="medium" />
         </Grid>
-        <Grid item xs={3}>
-          Transactions executed in bulk
+        <Grid item xs md={6} lg={3} mr={3} alignContent="center">
+          <Typography noWrap>Transactions executed in bulk</Typography>
         </Grid>
 
-        <Grid item xs={6} ml={5}>
+        <Grid item xs>
           {generateDataRowValue(transactionHash, 'hash', true)}
         </Grid>
 
@@ -37,11 +37,11 @@ const GroupedTxListItems = ({
               : ''
             return (
               <Box display="flex" key={tx.transaction.id}>
-                <Grid item xs={0.5} pt={2}>
+                <Grid item xs={1} sm={0.5} mt={2} mr={1}>
                   <Typography className={css.nonce}>{nonce}</Typography>
                 </Grid>
 
-                <Grid item xs={11.5}>
+                <Grid item xs={11} sm={11.5}>
                   <ExpandableTransactionItem item={tx} isBulkGroup={true} />
                 </Grid>
               </Box>

diff --git a/src/components/transactions/BulkTxListGroup/styles.module.css b/src/components/transactions/BulkTxListGroup/styles.module.css
@@ -22,13 +22,3 @@
   border-radius: var(--space-1);
   flex: 1;
 }
-
-/* @media (max-width: 1024px) {
-  .container {
-    gap: var(--space-1);
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      'nonce warning warning'
-      'items items items';
-  }
-} */
diff --git a/src/components/transactions/TxSummary/index.tsx b/src/components/transactions/TxSummary/index.tsx
@@ -47,12 +47,11 @@ const TxSummary = ({ item, isGrouped, isBulkGroup }: TxSummaryProps): ReactEleme
       })}
       id={tx.id}
     >
-      {(nonce !== undefined && !isGrouped) ||
-        (!isBulkGroup && (
-          <Box gridArea="nonce" data-testid="nonce" className={css.nonce}>
-            {nonce}
-          </Box>
-        ))}
+      {nonce !== undefined && !isGrouped && !isBulkGroup && (
+        <Box gridArea="nonce" data-testid="nonce" className={css.nonce}>
+          {nonce}
+        </Box>
+      )}
 
       {!isTrusted && (
         <Box data-testid="warning" gridArea="nonce">