From 59c5c0ae3bf0e0ed9040ad864e553c84ed682ab6 Mon Sep 17 00:00:00 2001
From: tommaso1 <tommasorosso1@gmail.com>
Date: Thu, 11 Jan 2024 22:08:59 +0100
Subject: [PATCH] [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 <ponchia.marco1994@gmail.com>
---
 .changeset/chilly-seas-camp.md                |  5 +++
 .../editorialComponents/Newsroom/Newsroom.tsx | 34 ++++++++++++++-----
 2 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/chilly-seas-camp.md

diff --git a/.changeset/chilly-seas-camp.md b/.changeset/chilly-seas-camp.md
new file mode 100644
index 000000000..24c65526c
--- /dev/null
+++ 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
index 610d5e4b3..97a2ecd43 100644
--- 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>
   );
 };