From 643066336207d31528bc4ba80831237cf6ae4bce Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 20 Mar 2022 21:23:11 -0700
Subject: [PATCH] Fix carousel auto content sizing.

---
 src/components/thumbnail.ts      |  5 ++---
 src/scss/favorite.scss           |  5 +++++
 src/scss/gallery.scss            |  6 +++---
 src/scss/thumbnail-carousel.scss |  2 +-
 src/scss/thumbnail.scss          | 18 +++++++-----------
 5 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 src/scss/favorite.scss

diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts
index 243524c3..35be6241 100644
--- a/src/components/thumbnail.ts
+++ b/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;
 
diff --git a/src/scss/favorite.scss b/src/scss/favorite.scss
new file mode 100644
index 00000000..c89adc2b
--- /dev/null
+++ b/src/scss/favorite.scss
@@ -0,0 +1,5 @@
+ha-icon.favorite {
+  position: absolute;
+  color: var(--primary-color);
+  padding: 2px;
+} 
\ No newline at end of file
diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss
index eaac8f8c..eb9d212e 100644
--- a/src/scss/gallery.scss
+++ b/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;
-} ;
+}
diff --git a/src/scss/thumbnail-carousel.scss b/src/scss/thumbnail-carousel.scss
index f99a6d9d..d98c7bed 100644
--- a/src/scss/thumbnail-carousel.scss
+++ b/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;
 }
diff --git a/src/scss/thumbnail.scss b/src/scss/thumbnail.scss
index 2bb746b9..d851b148 100644
--- a/src/scss/thumbnail.scss
+++ b/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()
\ No newline at end of file