From a5c87fa2283fc9e1876cbf35ba43e3509d4c82ed Mon Sep 17 00:00:00 2001
From: Jon Kafton <939376+jonkafton@users.noreply.github.com>
Date: Tue, 29 Oct 2024 20:47:24 +0100
Subject: [PATCH] Fix issue with hero image causing horizontal scroll

---
 frontends/main/src/app-pages/HomePage/HomePage.tsx     | 10 ++++++++--
 .../main/src/page-components/HeroSearch/HeroSearch.tsx | 10 ++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontends/main/src/app-pages/HomePage/HomePage.tsx b/frontends/main/src/app-pages/HomePage/HomePage.tsx
index 553c797d70..ac4e7891a0 100644
--- a/frontends/main/src/app-pages/HomePage/HomePage.tsx
+++ b/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">
diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
index f44c66a218..91b245197a 100644
--- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
+++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
@@ -101,7 +101,6 @@ const ImageContainer = styled.div(({ theme }) => ({
   alignItems: "center",
   justifyContent: "center",
   marginTop: "44px",
-  transform: "translateX(48px)",
   width: "513px",
   aspectRatio: "513 / 522",
   [theme.breakpoints.down("md")]: {
@@ -109,6 +108,7 @@ const ImageContainer = styled.div(({ theme }) => ({
   },
   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>
   )
 }