🐛(frontend) fix slider issue

Move emblaRef from the root .slider div to
div wrapper that covers only  the slideshow
so the panel (title, bullets, autoplay) do not
trigger drag and drop interactions.

Author: liamls

CHANGELOG.md

@@ -8,6 +8,12 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix storybook configuration
+- Fix course glimpse filters overlap on mobile/tablet
+- Fix slider drag and drop issues
+
 ## [3.4.0] - 2026-03-17
 
 ### Added

src/frontend/js/widgets/Slider/index.tsx

@@ -101,18 +101,19 @@ const Slider = ({ slides, title }: SliderProps) => {
   return (
     <div
       className="slider"
-      ref={emblaRef}
       aria-roledescription="carousel"
       aria-label={title}
       role="button"
       tabIndex={0}
       onKeyDown={handleKeyDown}
     >
-      <Slideshow
-        slides={slides}
-        onNextSlide={() => emblaApi?.scrollNext()}
-        onPreviousSlide={() => emblaApi?.scrollPrev()}
-      />
+      <div ref={emblaRef}>
+        <Slideshow
+          slides={slides}
+          onNextSlide={() => emblaApi?.scrollNext()}
+          onPreviousSlide={() => emblaApi?.scrollPrev()}
+        />
+      </div>
       <SlidePanel
         slides={slides}
         activeSlideIndex={activeSlideIndex}

src/frontend/scss/components/templates/richie/slider/_slider.scss

@@ -101,7 +101,7 @@ $r-slider-content-line-clamp: 4 !default;
 .slider__panel {
   @include make-container();
   @include make-container-max-widths();
-
+  cursor: default;
   display: flex;
   flex-direction: column-reverse;
 }