Fix thumbnails for non-gallery views.

src/scss/const.scss

@@ -0,0 +1,5 @@
+: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,3 +1,5 @@
+@use "const.scss";
+
 :host {
   width: 100%;
   height: 100%;
@@ -11,7 +13,6 @@
 
   --frigate-card-gallery-gap: 3px;
   --frigate-card-gallery-columns: 4;
-  --frigate-card-thumbnail-size: 100px;
 
   display: grid;
   grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));

src/scss/thumbnail-carousel.scss

@@ -1,3 +1,5 @@
+@use "const.scss";
+
 :host {
   --frigate-card-carousel-thumbnail-opacity: 1.0;
 }
@@ -18,4 +20,13 @@
 }
 .embla__slide.slide-selected {
   opacity: 1.0;
+}
+
+frigate-card-thumbnail[details] {
+  width: var(--frigate-card-thumbnail-details-width);
+  height: var(--frigate-card-thumbnail-size);
+}
+frigate-card-thumbnail:not([details]) {
+  width: var(--frigate-card-thumbnail-size);
+  height: var(--frigate-card-thumbnail-size);
 }

src/scss/thumbnail-details.scss

@@ -2,12 +2,13 @@
   display: flex;
   width: 100%;
   margin-left: 5px;
-  padding: 15px;
+  padding: 8px;
   color: var(--primary-text-color);
   overflow: hidden;
+  column-gap: 5%;
 }
 
-div {
+div.right, div.left {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,12 +16,26 @@ div {
 
 div.left {
   flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: center;
+
+  overflow: hidden;
+
+  column-gap: 5%;
 }
 
-div.larger {
-  font-size: 1.5rem;
+div.left div {
+  width: 100%;
 }
 
 span.heading {
   font-weight: bold;
 }
+
+.larger {
+  font-size: 1.5rem;
+}

src/scss/thumbnail.scss

@@ -1,3 +1,5 @@
+@use "const.scss";
+
 :host {
   display: flex;
   flex-direction: row;
@@ -5,8 +7,6 @@
 
   // Ensure control icons are relative to the thumbnail.
   position: relative;
-
-  --frigate-card-max-thumbnail-size: 175px;
 }
 
 :host([details]) {
@@ -29,9 +29,10 @@ img {
 
   // Restrict images to a maximum of thumbnail size.
   aspect-ratio: 1 / 1;
+  height: 100%;
 
-  max-width: var(--frigate-card-max-thumbnail-size);
-  max-height: var(--frigate-card-max-thumbnail-size);
+  max-width: var(--frigate-card-thumbnail-size-max);
+  max-height: var(--frigate-card-thumbnail-size-max);
 
   transition: transform 0.2s linear;
 }