First version of gallery refactor to use thumbnails.

src/scss/favorite.scss

@@ -1,14 +0,0 @@
-ha-icon.favorite {
-  position: absolute;
-  color: gold;
-  background: rgba(0,0,0,0.2);
-  border-radius: 50%;
-}
-
-ha-icon.timeline {
-  position: absolute;
-  color: var(--primary-color);
-  right: 0px;
-  background: rgba(0,0,0,0.2);
-  border-radius: 50%;
-}

src/scss/gallery.scss

@@ -1,9 +1,4 @@
-@use '@material/image-list/mdc-image-list';
-@use '@material/image-list';
-@use './favorite.scss';
-
 :host {
-  display: block;
   width: 100%;
   height: 100%;
   overflow: auto;
@@ -13,6 +8,15 @@
 
   // Hide scrollbar: Firefox
   scrollbar-width: none;
+
+  --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));
+  grid-auto-rows: var(--frigate-card-thumbnail-size);
+  grid-column-gap: var(--frigate-card-gallery-gap);
 }
 
 // Hide scrollbar for Chrome, Safari and Opera
@@ -20,21 +24,7 @@
   display: none;
 }
 
-.frigate-card-gallery {
-  // Note: In fullscreen, number of columns is overwritten in Javascript based
-  // on dimensions.
-  @include image-list.standard-columns(4, 5px);
-  @include image-list.shape-radius(5px);
-}
-
-.frigate-card-gallery .mdc-image-list__image {
-  transition: transform 0.2s linear;
-}
-.frigate-card-gallery .mdc-image-list__image:hover {
-  transform: scale(1.04);
-}
-
-ha-card.frigate-card-gallery-folder {
+ha-card {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -46,10 +36,11 @@ ha-card.frigate-card-gallery-folder {
   border-radius: 5px;
   background-color: var(--primary-background-color, black);
   padding: 10px;
-  height: 100%;
   line-height: 1;
+  overflow: hidden;
 }
 
-ha-icon.favorite {
-  opacity: 0.8;
+:host(:not([details])) ha-card,
+:host(:not([details])) frigate-card-thumbnail {
+  aspect-ratio: 1 / 1;
 }

src/scss/thumbnail-details.scss

@@ -0,0 +1,26 @@
+:host {
+  display: flex;
+  width: 100%;
+  margin-left: 5px;
+  padding: 15px;
+  color: var(--primary-text-color);
+  overflow: hidden;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+div.left {
+  flex: 1;
+}
+
+div.larger {
+  font-size: 1.5rem;
+}
+
+span.heading {
+  font-weight: bold;
+}

src/scss/thumbnail.scss

@@ -1,15 +1,12 @@
-@use './favorite.scss';
-
 :host {
   display: flex;
   flex-direction: row;
+  box-sizing: border-box;
 
-  --frigate-card-thumbnail-size: 100px;
+  // Ensure control icons are relative to the thumbnail.
+  position: relative;
 
-  // 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);
+  --frigate-card-max-thumbnail-size: 175px;
 }
 
 :host([details]) {
@@ -31,10 +28,10 @@ img {
   object-fit: cover;
 
   // Restrict images to a maximum of thumbnail size.
-  max-width: var(--frigate-card-thumbnail-size);
-  max-height: var(--frigate-card-thumbnail-size);
-  min-width: var(--frigate-card-thumbnail-size);
-  min-height: var(--frigate-card-thumbnail-size);
+  aspect-ratio: 1 / 1;
+
+  max-width: var(--frigate-card-max-thumbnail-size);
+  max-height: var(--frigate-card-max-thumbnail-size);
 
   transition: transform 0.2s linear;
 }
@@ -42,27 +39,18 @@ img:hover {
   transform: scale(1.04);
 }
 
-div.details {
-  display: flex;
-
-  width: 200px;
-  margin-left: 5px;
-  padding: 8px;
-  color: var(--primary-text-color);
-}
-div.details div {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-div.details div.left {
-  flex: 1;
+ha-icon.favorite {
+  position: absolute;
+  color: gold;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  opacity: 0.8;
 }
 
-div.larger {
-  font-size: 1.5rem;
-}
-
-span.heading {
-  font-weight: bold;
+ha-icon.timeline {
+  position: absolute;
+  color: var(--primary-color);
+  right: 0px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
 }