fix: Fix thumbnail carousel scroll position (#1606)

* fix: Fix thumbnail carousel scroll position

* Small formatting fix

src/utils/embla/carousel-controller.ts

@@ -128,10 +128,7 @@ export class CarouselController {
         // This controller manages slide changes (including shadow DOM
         // assignments, which the stock watcher does not handle).
         watchSlides: false,
-
-        // We use the auto-size plugin to manage resizes without carousel resets
-        // mid-scroll.
-        watchResize: false,
+        watchResize: true,
         watchDrag: this._draggable,
       },
       [

src/utils/embla/plugins/auto-size/auto-size.ts

@@ -38,9 +38,13 @@ function AutoSize(): AutoSizeType {
     intersectionHandler,
   );
 
-  const debouncedSetContainerHeight = debounce(() => setContainerHeight(), 200, {
-    trailing: true,
-  });
+  const debouncedSetContainerHeight = debounce(
+    () => setContainerHeightAndReInit(),
+    200,
+    {
+      trailing: true,
+    },
+  );
 
   function init(emblaApiInstance: EmblaCarouselType): void {
     emblaApi = emblaApiInstance;
@@ -87,8 +91,9 @@ function AutoSize(): AutoSizeType {
 
     if (isContainerIntersectingNow !== previousContainerIntersecting) {
       // Don't reinitialize on first call (intersectionHandler is always called
-      // on initial observation).
-      const callReInit = previousContainerIntersecting !== null;
+      // on initial observation), nor when the viewport is not intersecting.
+      const callReInit =
+        isContainerIntersectingNow && previousContainerIntersecting !== null;
       previousContainerIntersecting = isContainerIntersectingNow;
       if (callReInit) {
         reInitController?.reinit();
@@ -122,7 +127,7 @@ function AutoSize(): AutoSizeType {
     }
   }
 
-  function setContainerHeight(): void {
+  function setContainerHeightAndReInit(): void {
     const {
       slideRegistry,
       options: { axis },