Refactor thumbnail sizing.

src/scss/carousel.scss

@@ -55,7 +55,6 @@ img,video {
 
 .embla__slide {
   position: relative;
-  height: 100%;
   overflow: visible;
 }
 :host([direction=vertical]) .embla__slide {

src/scss/const.scss

@@ -1,5 +1,4 @@
 :host {
-  --frigate-card-thumbnail-size: 100px;
   --frigate-card-thumbnail-size-max: 175px;
   --frigate-card-thumbnail-details-width: calc(var(--frigate-card-thumbnail-size) + 200px);
 }

src/scss/gallery.scss

@@ -1,8 +1,6 @@
-@use "const.scss";
-
 :host {
   width: 100%;
-  height: 100%;
+  height: auto;
   overflow: auto;
 
   // Hide scrollbar: IE and Edge
@@ -16,8 +14,8 @@
 
   display: grid;
   grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
-  grid-auto-rows: var(--frigate-card-thumbnail-size);
-  grid-column-gap: var(--frigate-card-gallery-gap);
+  grid-auto-rows: 1fr;
+  gap: var(--frigate-card-gallery-gap);
 }
 
 // Hide scrollbar for Chrome, Safari and Opera
@@ -32,16 +30,21 @@ ha-card {
   box-sizing: border-box;
   text-align: center;
   opacity: 0.7;
-  color: var(--secondary-text-color, white);
-  border: 2px ridge var(--secondary-text-color, black);
+  color: var(--primary-text-color, white);
+  border: 2px ridge var(--primary-text-color, black);
   border-radius: 5px;
   background-color: var(--primary-background-color, black);
   padding: 10px;
   line-height: 1;
   overflow: hidden;
+
+  transition: transform 0.2s linear;
+}
+ha-card:hover {
+  transform: scale(1.04)
 }
 
-:host(:not([details])) ha-card,
-:host(:not([details])) frigate-card-thumbnail {
-  aspect-ratio: 1 / 1;
-}
+ha-card, frigate-card-thumbnail {
+  height: 100%;
+  max-height: var(--frigate-card-thumbnail-size);
+}

src/scss/media-carousel.scss

@@ -4,4 +4,5 @@
 
 .embla__slide {
   flex: 0 0 100%;
+  height: 100%;
 }

src/scss/thumbnail-carousel.scss

@@ -1,13 +1,13 @@
-@use "const.scss";
+@use 'const.scss';
 
 :host {
-  --frigate-card-carousel-thumbnail-opacity: 1.0;
+  --frigate-card-carousel-thumbnail-opacity: 1;
 }
 
-:host([direction=vertical]) {
+:host([direction='vertical']) {
   height: 100%;
 }
-:host([direction=horizontal]) {
+:host([direction='horizontal']) {
   // In fullscreen mode, without explicitly setting the height to auto Chrome
   // will construct a stylesheet with 100% height.
   height: auto;
@@ -19,14 +19,13 @@
   transition: opacity 0.6s ease;
 }
 .embla__slide.slide-selected {
-  opacity: 1.0;
+  opacity: 1;
 }
 
-frigate-card-thumbnail[details] {
-  width: var(--frigate-card-thumbnail-details-width);
-  height: var(--frigate-card-thumbnail-size);
-}
-frigate-card-thumbnail:not([details]) {
+frigate-card-thumbnail {
   width: var(--frigate-card-thumbnail-size);
   height: var(--frigate-card-thumbnail-size);
-}
+}
+frigate-card-thumbnail[details] {
+  width: var(--frigate-card-thumbnail-details-width);
+}

src/scss/thumbnail-feature-event.scss

@@ -1,24 +1,24 @@
 :host {
   display: block;
-  height: 100%;
+  max-width: var(--frigate-card-thumbnail-size);
+  max-height: var(--frigate-card-thumbnail-size);
   overflow: hidden;
+
+  // Restrict images to a maximum of thumbnail size.
+  aspect-ratio: 1 / 1;
 }
 
 img, ha-icon {
   border-radius: var(--ha-card-border-radius, 4px);
 
-  max-width: var(--frigate-card-thumbnail-size-max);
-  max-height: var(--frigate-card-thumbnail-size-max);
+  width: 100%;
+  height: 100%;
 
   // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
   // should be clipped to fill the thumbnail div whilst maintaining
   // aspect-ratio.
   object-fit: cover;
 
-  // Restrict images to a maximum of thumbnail size.
-  aspect-ratio: 1 / 1;
-  height: 100%;
-
   transition: transform 0.2s linear;
 }
 

src/scss/thumbnail-feature-recording.scss

@@ -4,11 +4,10 @@
   justify-content: center;
   align-items: center;
 
-  height: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
-  max-width: var(--frigate-card-thumbnail-size-max);
-  max-height: var(--frigate-card-thumbnail-size-max);
+  max-width: var(--frigate-card-thumbnail-size);
+  max-height: var(--frigate-card-thumbnail-size);
   padding: 10px;
 
   border: 1px solid var(--secondary-color);
@@ -27,4 +26,4 @@
 
 div.title {
   font-size: 1.5rem;
-}
+}

src/scss/thumbnail.scss

@@ -1,5 +1,3 @@
-@use "const.scss";
-
 :host {
   display: flex;
   flex-direction: row;
@@ -7,6 +5,11 @@
 
   // Ensure control icons are relative to the thumbnail.
   position: relative;
+  overflow: hidden;
+}
+
+:host(:not([details])) {
+  aspect-ratio: 1 / 1;
 }
 
 :host([details]) {

src/scss/timeline-core.scss

@@ -1,5 +1,6 @@
 @use 'vis-timeline/dist/vis-timeline-graph2d.css';
 @use 'drawer';
+@use 'const.scss';
 
 :host {
   width: 100%;
@@ -15,6 +16,14 @@
   position: relative;
 }
 
+frigate-card-thumbnail {
+  height: var(--frigate-card-thumbnail-size);
+  width: var(--frigate-card-thumbnail-size);
+}
+frigate-card-thumbnail[details] {
+  width: var(--frigate-card-thumbnail-details-width);
+}
+
 div.timeline {
   flex: 1;
 }