Merged in fix/remove-deafult-centering-behaviour-in-carousels (pull request #1543)

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

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>

apps/scandic-web/components/Carousel/carousel.module.css

@@ -13,10 +13,6 @@
   gap: var(--Spacing-x2);
 }
 
-.centerContent {
-  justify-content: center;
-}
-
 .item {
   min-width: 0;
 }

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 }) => (