refactor: use grid2 to work with no wrap

graasp · Oct 23, 2023 · 144b993 · 144b993
1 parent 7105c80
commit 144b993
Showing 1 changed file with 24 additions and 15 deletions.
diff --git a/src/components/main/AppCard.tsx b/src/components/main/AppCard.tsx
@@ -1,9 +1,9 @@
 import {
+  Box,
   Card,
   CardActionArea,
   CardContent,
   Skeleton,
-  Stack,
   Typography,
   styled,
 } from '@mui/material';
@@ -46,41 +46,50 @@ const AppCard = ({
     id={buildItemFormAppOptionId(name)}
   >
     <StyledCardActionArea>
-      <Stack direction="row">
-        <Stack
-          sx={{
-            height: { xs: 40, sm: 70 },
-            width: { xs: 40, sm: 70 },
-            background: 'white',
-          }}
-        >
-          <img src={image ?? defaultImage} alt={name} width="100%" />
-        </Stack>
-        <Stack>
+      <Grid2 container direction="row" alignItems="center" width="100%">
+        <Grid2 xs={2}>
+          <Box
+            sx={{
+              width: '100%',
+              heght: '100%',
+              background: 'white',
+            }}
+          >
+            <img src={image ?? defaultImage} alt={name} width="100%" />
+          </Box>
+        </Grid2>
+        <Grid2 xs={10}>
           <CardContent
-            sx={{ width: '100%', pt: 1, paddingBottom: '0 !important' }}
+            sx={{
+              pt: 1,
+              paddingBottom: '0 !important',
+              minWidth: 0,
+            }}
           >
             <Typography
               fontWeight="bold"
               gutterBottom
               variant="body1"
               component="div"
+              width="100%"
               noWrap
             >
               {name ?? <Skeleton />}
             </Typography>
             <Typography
               variant="body2"
               color="text.secondary"
+              width="100%"
               sx={{
                 display: { xs: 'none', sm: 'block', md: 'block' },
               }}
+              noWrap
             >
               {description ?? <Skeleton height={20} />}
             </Typography>
           </CardContent>
-        </Stack>
-      </Stack>
+        </Grid2>
+      </Grid2>
     </StyledCardActionArea>
   </Card>
 );