fix: Fix thumbnail carousel scroll position (#1606)

* fix: Fix thumbnail carousel scroll position

* Small formatting fix

src/components/thumbnail-carousel.ts

@@ -15,7 +15,6 @@ import { ExtendedHomeAssistant } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { dispatchFrigateCardEvent } from '../utils/basic.js';
 import { CarouselDirection } from '../utils/embla/carousel-controller.js';
-import AutoSize from '../utils/embla/plugins/auto-size/auto-size.js';
 import { MediaQueriesResults } from '../view/media-queries-results';
 import './carousel.js';
 import './thumbnail.js';
@@ -43,7 +42,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
   public fadeThumbnails = false;
 
   protected _thumbnailSlides: TemplateResult[] = [];
-  protected _plugins = [AutoSize()];
 
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('config')) {
@@ -144,7 +142,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
 
     return html`<frigate-card-carousel
       direction=${direction}
-      .plugins=${this._plugins}
       .selected=${this._getSelectedSlide() ?? 0}
       .dragFree=${true}
     >

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 },