Fix issue with hero image causing horizontal scroll (#1777)

Author: jonkafton

frontends/main/src/app-pages/HomePage/HomePage.tsx

@@ -38,12 +38,18 @@ const MediaCarousel = styled(ResourceCarousel)(({ theme }) => ({
   },
 }))
 
+const StyledContainer = styled(Container)({
+  "@media (max-width: 1365px)": {
+    overflow: "hidden",
+  },
+})
+
 const HomePage: React.FC = () => {
   return (
     <>
       <LearningResourceDrawer />
       <FullWidthBackground>
-        <Container>
+        <StyledContainer>
           <HeroSearch />
           <section>
             <FeaturedCoursesCarousel
@@ -52,7 +58,7 @@ const HomePage: React.FC = () => {
               config={carousels.FEATURED_RESOURCES_CAROUSEL}
             />
           </section>
-        </Container>
+        </StyledContainer>
       </FullWidthBackground>
       <PersonalizeSection />
       <Container component="section">

frontends/main/src/page-components/HeroSearch/HeroSearch.tsx

@@ -101,14 +101,14 @@ const ImageContainer = styled.div(({ theme }) => ({
   alignItems: "center",
   justifyContent: "center",
   marginTop: "44px",
-  transform: "translateX(48px)",
   width: "513px",
   aspectRatio: "513 / 522",
   [theme.breakpoints.down("md")]: {
     display: "none",
   },
   img: {
     width: "100%",
+    transform: "translateX(48px)",
   },
   position: "relative",
 }))
@@ -209,13 +209,7 @@ const HeroImage: React.FC = () => {
 
   return (
     <ImageContainer>
-      <Image
-        alt=""
-        src={`/images/hero/hero-${imageIndex}.png`}
-        fill
-        priority
-        sizes="513px"
-      />
+      <Image alt="" src={`/images/hero/hero-${imageIndex}.png`} fill priority />
     </ImageContainer>
   )
 }