[DEV-1236] Fix vertical align (#531)

* redirect to last guide if no one is specified from the path * Fix vertical align * linter * remove modifications not related to this pr * pr comments * changeset --------- Co-authored-by: Marco Ponchia <[email protected]>
pagopa · Jan 11, 2024 · 59c5c0a · 59c5c0a
1 parent efab9d0
commit 59c5c0a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/.changeset/chilly-seas-camp.md b/.changeset/chilly-seas-camp.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix homepage vertical align
diff --git a/apps/nextjs-website/src/editorialComponents/Newsroom/Newsroom.tsx b/apps/nextjs-website/src/editorialComponents/Newsroom/Newsroom.tsx
@@ -56,7 +56,14 @@ const Item = (props: INewsroomItem) => {
   } = props;
 
   return (
-    <Grid item sm={12} md={4} mb={8} minWidth={{ xs: '80vw', md: 'auto' }}>
+    <Grid
+      item
+      sm={12}
+      md={4}
+      mb={8}
+      minWidth={{ xs: '80vw', md: 'auto' }}
+      sx={{ display: 'flex', flexDirection: 'column' }}
+    >
       <Box
         position={'relative'}
         sx={{ aspectRatio: '3/2', overflow: 'hidden' }}
@@ -99,14 +106,23 @@ const Item = (props: INewsroomItem) => {
           {new Intl.DateTimeFormat(locale, options).format(date)}
         </Typography>
       )}
-      <Typography variant='h6'>{title}</Typography>
-      <Stack mt={2} direction='row' alignItems='center' color='primary.main'>
-        <LinkButton
-          disabled={!!comingSoonLabel}
-          href={href.link}
-          label={href.label}
-        />
-      </Stack>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          flexGrow: '1',
+        }}
+      >
+        <Typography variant='h6'>{title}</Typography>
+        <Stack mt={2} direction='row' alignItems='center' color='primary.main'>
+          <LinkButton
+            disabled={!!comingSoonLabel}
+            href={href.link}
+            label={href.label}
+          />
+        </Stack>
+      </div>
     </Grid>
   );
 };