From 641b82c2a3379af513949d6da66e92228c7313ae Mon Sep 17 00:00:00 2001
From: James Mealy <james@safe.global>
Date: Wed, 29 May 2024 12:25:41 +0100
Subject: [PATCH] fix: column widths on mobile

---
 .../transactions/BulkTxListGroup/index.tsx         | 14 +++++++-------
 .../transactions/BulkTxListGroup/styles.module.css | 10 ----------
 src/components/transactions/TxSummary/index.tsx    | 11 +++++------
 3 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/components/transactions/BulkTxListGroup/index.tsx b/src/components/transactions/BulkTxListGroup/index.tsx
index df02b638d7..10c67873e6 100644
--- 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
index a550537703..3cbdb37ecb 100644
--- 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
index 6fb08c375f..cd7f075b99 100644
--- 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">