From 0a150a4ecadb394c47d537c4a18c718ee5c42f17 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Mon, 17 Mar 2025 15:28:24 +0000
Subject: [PATCH] Merged in fix/remove-deafult-centering-behaviour-in-carousels
 (pull request #1543)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(SW-1941): clean up custom Carousel component centering

* refactor: clean up custom Carousel component centering

- Removed unused centerContent class from carousel.module.css.
- Simplified CarouselContent component by eliminating unnecessary state and effect hooks.
- Updated HotelCardCarousel to include responsive breakpoints for scrolling behavior.

* refactor: simplify scrolling options in HotelCardCarousel

- Updated the HotelCardCarousel component to streamline scrolling options by removing responsive breakpoints and setting containScroll to false.


Approved-by: Matilda Landström
---
 .../components/Carousel/CarouselContent.tsx       | 15 ++-------------
 .../components/Carousel/carousel.module.css       |  4 ----
 .../DestinationPage/HotelCardCarousel/index.tsx   |  1 +
 3 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/apps/scandic-web/components/Carousel/CarouselContent.tsx b/apps/scandic-web/components/Carousel/CarouselContent.tsx
index f54cedeed..2fff8c089 100644
--- a/apps/scandic-web/components/Carousel/CarouselContent.tsx
+++ b/apps/scandic-web/components/Carousel/CarouselContent.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { cx } from "class-variance-authority"
-import { useEffect, useState } from "react"
 
 import { useCarousel } from "./CarouselContext"
 
@@ -12,21 +11,11 @@ export function CarouselContent({
   children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  const { carouselRef, canScrollNext, canScrollPrev } = useCarousel()
-  const [isOneItem, setIsOneItem] = useState(false)
-
-  useEffect(() => {
-    setIsOneItem(!canScrollPrev() && !canScrollNext())
-  }, [canScrollPrev, canScrollNext])
+  const { carouselRef } = useCarousel()
 
   return (
     <div ref={carouselRef} className={styles.viewport}>
-      <div
-        className={cx(styles.container, className, {
-          [styles.centerContent]: isOneItem,
-        })}
-        {...props}
-      >
+      <div className={cx(styles.container, className)} {...props}>
         {children}
       </div>
     </div>
diff --git a/apps/scandic-web/components/Carousel/carousel.module.css b/apps/scandic-web/components/Carousel/carousel.module.css
index e902f3846..ef10b75a9 100644
--- a/apps/scandic-web/components/Carousel/carousel.module.css
+++ b/apps/scandic-web/components/Carousel/carousel.module.css
@@ -13,10 +13,6 @@
   gap: var(--Spacing-x2);
 }
 
-.centerContent {
-  justify-content: center;
-}
-
 .item {
   min-width: 0;
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
index 77ff3aa95..f3a06f58d 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
@@ -29,6 +29,7 @@ export default function HotelCardCarousel({
       className={styles.carousel}
       scrollToIdx={selectedHotelIdx}
       align="center"
+      opts={{ containScroll: false }}
     >
       <Carousel.Content className={styles.carouselContent}>
         {visibleHotels.map(({ hotel, url }) => (