From 3ea2d449086c96f1689b2415201e5bfca08efa28 Mon Sep 17 00:00:00 2001
From: draxvint <polynar.david@gmail.com>
Date: Tue, 7 Jan 2025 17:54:37 +0100
Subject: [PATCH] fix product details page mobile image slider

---
 .../route.module.scss                         | 26 +++++++++++++++----
 .../product-details.$productSlug/route.tsx    |  4 +++
 src/components/banner/banner.tsx              |  5 ++--
 .../featured-products-section.module.scss     |  1 -
 .../product-images/product-images.module.scss |  2 ++
 src/components/section/section.tsx            |  6 +++--
 6 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/app/routes/product-details.$productSlug/route.module.scss b/app/routes/product-details.$productSlug/route.module.scss
index f29fea8..5734043 100644
--- a/app/routes/product-details.$productSlug/route.module.scss
+++ b/app/routes/product-details.$productSlug/route.module.scss
@@ -1,5 +1,5 @@
 .page {
-    padding: 0 8px 50px;
+    padding: 0 0 50px;
 }
 
 .content {
@@ -11,6 +11,10 @@
     position: relative;
 }
 
+.productImagesWrapper {
+    padding-left: 8px;
+}
+
 .productInfo {
     position: sticky;
     place-self: start;
@@ -76,14 +80,18 @@
     font-size: 18px;
 }
 
-.socialLinks {
-    margin-top: 36px;
+.spotlightsSection{
+    padding: 0 8px;
+}
+
+.banner{
+    padding: 0 8px;
 }
 
 @media (max-width: 1024px) {
     .content {
         grid-template-columns: 1fr 1fr;
-        column-gap: 16px;
+        column-gap: 8px;
     }
 }
 
@@ -91,11 +99,19 @@
     .content {
         grid-template-columns: 1fr;
         row-gap: 24px;
-        padding-right: unset;
+        padding-right: 8px;
+    }
+
+    .productInfo {
+        padding: 0 8px;
     }
 }
 
 @media (max-width: 480px) {
+    .productImagesWrapper {
+        padding-left: 0;
+    }
+
     .productName {
         font: var(--heading6);
     }
diff --git a/app/routes/product-details.$productSlug/route.tsx b/app/routes/product-details.$productSlug/route.tsx
index bce5c8c..0577890 100644
--- a/app/routes/product-details.$productSlug/route.tsx
+++ b/app/routes/product-details.$productSlug/route.tsx
@@ -57,7 +57,9 @@ export default function ProductDetailsPage() {
             {/*<Breadcrumbs breadcrumbs={breadcrumbs} />*/}
 
             <div className={styles.content}>
+              <div className={styles.productImagesWrapper}>
                 <ProductImages media={media} />
+              </div>
 
                 <div className={styles.productInfo}>
                     <h1 className={styles.productName}>{product.name}</h1>
@@ -159,6 +161,7 @@ export default function ProductDetailsPage() {
 
             <FeaturedProductsSection  categorySlug={'new-in'} title={'You might also like'} productCount={4} />
             <Section
+                className={styles.spotlightsSection}
                 title="Mix, match, and make it yours"
                 subheading="Complete the look"
             >
@@ -210,6 +213,7 @@ export default function ProductDetailsPage() {
                 />
             </Section>
             <Banner
+              className={styles.banner}
                 title="A hot summer deserves a cool hat"
                 subheading="Product Spotlight"
                 buttonText="Shop now"
diff --git a/src/components/banner/banner.tsx b/src/components/banner/banner.tsx
index 4cad4f6..f192e2c 100644
--- a/src/components/banner/banner.tsx
+++ b/src/components/banner/banner.tsx
@@ -8,12 +8,13 @@ interface BannerProps {
     buttonText: string;
     buttonUrl: string;
     imageUrl: string;
+    className?: string;
 }
 
-export const Banner = ({ title, subheading, buttonText, buttonUrl, imageUrl }: BannerProps) => {
+export const Banner = ({ title, subheading, buttonText, buttonUrl, imageUrl, className }: BannerProps) => {
     const navigate = useNavigate();
     return (
-        <div className={styles.banner}>
+        <div className={classNames(styles.banner, className)}>
             <div className={styles.bannerContentWrapper}>
                 <div className={styles.bannerContent}>
                     <span className={styles.bannerSubheading}>{subheading}</span>
diff --git a/src/components/featured-products-section/featured-products-section.module.scss b/src/components/featured-products-section/featured-products-section.module.scss
index a3f3b1f..13fbdab 100644
--- a/src/components/featured-products-section/featured-products-section.module.scss
+++ b/src/components/featured-products-section/featured-products-section.module.scss
@@ -1,5 +1,4 @@
 .root {
-    margin: 0 calc(-1 * var(--pagePaddingHoriz));
     padding: 75px var(--pagePaddingHoriz);
     display: flex;
     flex-direction: column;
diff --git a/src/components/product-images/product-images.module.scss b/src/components/product-images/product-images.module.scss
index af83ce3..b2c5f2e 100644
--- a/src/components/product-images/product-images.module.scss
+++ b/src/components/product-images/product-images.module.scss
@@ -47,5 +47,7 @@
         width: 100%;
         max-width: 100vw;
         height: 460px;
+        padding-left: 8px;
+        padding-right: 8px;
     }
 }
diff --git a/src/components/section/section.tsx b/src/components/section/section.tsx
index f6c261a..47e370d 100644
--- a/src/components/section/section.tsx
+++ b/src/components/section/section.tsx
@@ -1,13 +1,15 @@
+import classNames from 'classnames';
 import styles from './section.module.scss';
 
 interface SectionProps {
     title: string;
     subheading: string;
     children?: React.ReactNode;
+    className?: string;
 }
-export const Section = ({title, subheading, children}: SectionProps) => {
+export const Section = ({title, subheading, children, className}: SectionProps) => {
     return (
-        <div className={styles.root}>
+        <div className={classNames(styles.root, className)}>
             <div className={styles.header}>
                 <div className={styles.subheading}>{subheading}</div>
                 <h3 className={'uppercase'}>{title}</h3>