From f67d23145a8978327be6081da8e38941fc6e1342 Mon Sep 17 00:00:00 2001
From: Jeremy Gordillo <jere.gordi@gmail.com>
Date: Thu, 1 Feb 2024 18:35:26 +0100
Subject: [PATCH] [DEV-1238] Resizing the "Featured" section as the page loads
 (#591)

* fix layout shift

* Create orange-colts-listen.md

* improve styles

* fix after changes

---------

Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com>
---
 .changeset/orange-colts-listen.md             |  5 ++
 .../editorialComponents/Newsroom/Newsroom.tsx | 55 +++++++------------
 2 files changed, 26 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/orange-colts-listen.md

diff --git a/.changeset/orange-colts-listen.md b/.changeset/orange-colts-listen.md
new file mode 100644
index 000000000..b7c9618a1
--- /dev/null
+++ b/.changeset/orange-colts-listen.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+[DEV-1238] Resizing the "Featured" section as the page loads
diff --git a/apps/nextjs-website/src/editorialComponents/Newsroom/Newsroom.tsx b/apps/nextjs-website/src/editorialComponents/Newsroom/Newsroom.tsx
index 97a2ecd43..6ea4f43f2 100644
--- a/apps/nextjs-website/src/editorialComponents/Newsroom/Newsroom.tsx
+++ b/apps/nextjs-website/src/editorialComponents/Newsroom/Newsroom.tsx
@@ -1,16 +1,8 @@
 'use client';
 import LinkButton from '@/components/atoms/LinkButton/LinkButton';
-import {
-  Typography,
-  Grid,
-  Stack,
-  Box,
-  useTheme,
-  useMediaQuery,
-  Theme,
-} from '@mui/material';
-import EContainer from '@/editorialComponents/EContainer/EContainer';
+import { Typography, Grid, Stack, Box, useTheme } from '@mui/material';
 import Image from 'next/image';
+import { useMemo } from 'react';
 
 interface INewsroomItem {
   comingSoonLabel?: string;
@@ -129,40 +121,35 @@ const Item = (props: INewsroomItem) => {
 
 const Newsroom = (props: INewsroom) => {
   const { items, py = 2 } = props;
-  const isScreenLargerThenMd = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.up('md')
+
+  const news = useMemo(
+    () => items.map((item, i) => <Item key={i} {...item} />),
+    [items]
   );
-  const { palette } = useTheme();
 
-  return isScreenLargerThenMd ? (
-    <EContainer background={palette.background.paper} py={py}>
-      <Grid item md={12}>
-        <Grid container spacing={3}>
-          {items.map((item, i) => (
-            <Item key={i} {...item} />
-          ))}
-        </Grid>
-      </Grid>
-    </EContainer>
-  ) : (
-    <Box ml={4}>
+  return (
+    <Box ml={{ sm: 4, md: 3, xl: 6 }}>
       <Grid
         container
-        spacing={2}
-        wrap='nowrap'
+        spacing={{ xs: 2, md: 3 }}
+        py={py}
         sx={{
+          flexWrap: { xs: 'nowrap', md: 'wrap' },
+          maxWidth: { md: '1280px', lg: '1310px' },
+          mx: 'auto',
+          marginLeft: { sm: '-32px', md: '-16px', lg: 'auto' },
+          'div.MuiGrid-item:first-of-type': {
+            marginLeft: { xs: '32px', sm: '16px', md: '0px' },
+          },
           overflowX: 'scroll',
           paddingRight: '32px',
-          width: 'calc(100% + 32px)',
-          marginLeft: '-32px',
-          'div.MuiGrid-item:first-of-type': {
-            marginLeft: '16px',
+          width: {
+            xs: 'auto',
+            md: '100%',
           },
         }}
       >
-        {items.map((item, i) => (
-          <Item key={i} {...item} />
-        ))}
+        {news}
       </Grid>
     </Box>
   );