fix: New tx menu on mobile

safe-global · Jun 22, 2023 · 62d7a2d · 62d7a2d
1 parent 54b3e6a
commit 62d7a2d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/components/tx-flow/flows/NewTx/index.tsx b/src/components/tx-flow/flows/NewTx/index.tsx
@@ -6,6 +6,7 @@ import { Box, Typography } from '@mui/material'
 import { TxModalContext } from '../../'
 import TokenTransferFlow from '../TokenTransfer'
 import { AppRoutes } from '@/config/routes'
+import css from './styles.module.css'
 
 const BUTTONS_HEIGHT = '91px'
 
@@ -23,7 +24,7 @@ const NewTxMenu = () => {
   }, [setTxFlow])
 
   return (
-    <Box display="flex" flexDirection="column" alignItems="center" gap={2} width={452} m="auto">
+    <Box className={css.wrapper}>
       <Typography variant="h6" fontWeight={700}>
         New transaction
       </Typography>

diff --git a/src/components/tx-flow/flows/NewTx/styles.module.css b/src/components/tx-flow/flows/NewTx/styles.module.css
@@ -0,0 +1,15 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  margin: auto;
+  padding: 0 var(--space-2);
+}
+
+@media (min-width: 600px) {
+  .wrapper {
+    width: 452px;
+  }
+}