From 0155946d74ccf68d17a0ed25bc8711521a7e3629 Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Thu, 24 Jul 2025 21:18:19 +0200
Subject: [PATCH] Fix carousel dropdown (#2326)

Co-authored-by: brymut <mutaiwork@gmail.com>
---
 components/carousel.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/carousel.js b/components/carousel.js
index 5be0216a..3d69152e 100644
--- a/components/carousel.js
+++ b/components/carousel.js
@@ -53,12 +53,19 @@ function useArrowKeys ({ moveLeft, moveRight }) {
   }, [onKeyDown])
 }
 
-function Carousel ({ close, mediaArr, src }) {
+function Carousel ({ close, mediaArr, src, setOptions }) {
   const [index, setIndex] = useState(mediaArr.findIndex(([key]) => key === src))
   const [currentSrc, canGoLeft, canGoRight] = useMemo(() => {
     return [mediaArr[index][0], index > 0, index < mediaArr.length - 1]
   }, [mediaArr, index])
 
+  useEffect(() => {
+    if (index === -1) return
+    setOptions({
+      overflow: <CarouselOverflow {...mediaArr[index][1]} />
+    })
+  }, [index, mediaArr, setOptions])
+
   const moveLeft = useCallback(() => {
     setIndex(i => Math.max(0, i - 1))
   }, [setIndex])
@@ -108,8 +115,8 @@ export function CarouselProvider ({ children }) {
   const showModal = useShowModal()
 
   const showCarousel = useCallback(({ src }) => {
-    showModal((close) => {
-      return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} />
+    showModal((close, setOptions) => {
+      return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
     }, {
       fullScreen: true,
       overflow: <CarouselOverflow {...media.current.get(src)} />