Make home page cards take up full width on mobile

ral-facilities · Jul 7, 2023 · 29c4286 · 29c4286
1 parent 8c1cc3d
commit 29c4286
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/homePage/homePage.component.tsx b/src/homePage/homePage.component.tsx
@@ -55,6 +55,7 @@ const paperStyles = {
   borderRadius: '4px',
   marginBottom: 2,
   height: '100%',
+  width: '100%',
 };
 
 const avatarStyles = {
@@ -270,7 +271,7 @@ const HomePage = (): React.ReactElement => {
           </Grid>
         </Paper>
         <Grid container spacing={2}>
-          <Grid item sm={12} md={4}>
+          <Grid item xs={12} md={4}>
             <Paper sx={paperStyles} elevation={1}>
               <Box sx={paperContentStyles}>
                 <Avatar sx={avatarStyles}>
@@ -296,7 +297,7 @@ const HomePage = (): React.ReactElement => {
               </Box>
             </Paper>
           </Grid>
-          <Grid item sm={12} md={4}>
+          <Grid item xs={12} md={4}>
             <Paper sx={paperStyles} elevation={1}>
               <Box sx={paperContentStyles}>
                 <Avatar sx={avatarStyles}>
@@ -322,7 +323,7 @@ const HomePage = (): React.ReactElement => {
               </Box>
             </Paper>
           </Grid>
-          <Grid item sm={12} md={4}>
+          <Grid item xs={12} md={4}>
             <Paper
               sx={{ ...paperStyles, backgroundColor: '#003088' }}
               elevation={1}