Fix carousel auto content sizing.

src/components/thumbnail.ts

@@ -1,16 +1,15 @@
-import { CSSResult, TemplateResult, html, unsafeCSS } from 'lit';
+import { CSSResult, TemplateResult, html, unsafeCSS, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { format, fromUnixTime } from 'date-fns';
 
 import type { FrigateBrowseMediaSource } from '../types.js';
-import { FrigateCardCarousel } from './carousel.js';
 import { getEventDurationString, prettifyFrigateName } from '../common.js';
 import { localize } from '../localize/localize.js';
 
 import thumbnailStyle from '../scss/thumbnail.scss';
 
 @customElement('frigate-card-thumbnail')
-export class FrigateCardThumbnail extends FrigateCardCarousel {
+export class FrigateCardThumbnail extends LitElement {
   @property({ attribute: false })
   public media?: FrigateBrowseMediaSource;
 

src/scss/favorite.scss

@@ -0,0 +1,5 @@
+ha-icon.favorite {
+  position: absolute;
+  color: var(--primary-color);
+  padding: 2px;
+} 

src/scss/gallery.scss

@@ -1,6 +1,6 @@
 @use '@material/image-list/mdc-image-list';
 @use '@material/image-list';
-@use 'thumbnail';
+@use './favorite.scss';
 
 :host {
   display: block;
@@ -50,6 +50,6 @@ ha-card.frigate-card-gallery-folder {
   line-height: 1;
 }
 
-@include thumbnail.thumbnail-favorite() {
+ha-icon.favorite {
   opacity: 0.8;
-} ;
+}

src/scss/thumbnail-carousel.scss

@@ -3,7 +3,7 @@
 }
 
 .embla__slide {
-  flex: 0 0 fit-content;
+  flex: 0 0 auto;
   opacity: var(--frigate-card-carousel-thumbnail-opacity);
   transition: opacity 0.6s ease;
 }

src/scss/thumbnail.scss

@@ -1,8 +1,15 @@
+@use './favorite.scss';
+
 :host {
   display: flex;
   flex-direction: row;
 
   --frigate-card-thumbnail-size: 100px;
+
+  // Do not let the contain expand to fill more height than the height of the
+  // thumbnail. Without this the thumbnail carousel will allow the thumbnail to
+  // expand to the full height of the viewport on a vertical carousel.
+  max-height: var(--frigate-card-thumbnail-size);
 }
 
 :host([details]) {
@@ -53,14 +60,3 @@ div.larger {
 span.heading {
   font-weight: bold;
 }
-
-@mixin thumbnail-favorite() {
-  ha-icon.favorite {
-    position: absolute;
-    color: var(--primary-color);
-    padding: 2px;
-    @content;
-  } 
-}
-
-@include thumbnail-favorite()