[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 <[email protected]>
pagopa · Feb 1, 2024 · f67d231 · f67d231
1 parent e976969
commit f67d231
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 34 deletions.
diff --git a/.changeset/orange-colts-listen.md 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
@@ -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>
   );