feat: Increase max thumbnail size to 300px (#1703)

* feat: Remove max thumbnail size

* Remove old comment.

* Set max to 350px

* Decrease max size to 300px

src/components/gallery.ts

@@ -16,7 +16,6 @@ import {
   CardWideConfig,
   frigateCardConfigDefaults,
   GalleryConfig,
-  THUMBNAIL_WIDTH_MAX,
 } from '../config/types';
 import { localize } from '../localize/localize';
 import galleryCoreStyle from '../scss/gallery-core.scss';
@@ -266,11 +265,7 @@ export class FrigateCardGalleryCore extends LitElement {
       frigateCardConfigDefaults.media_gallery.controls.thumbnails.size;
     const columns = this.galleryConfig?.controls.thumbnails.show_details
       ? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN))
-      : Math.max(
-          1,
-          Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX),
-          Math.ceil(this.clientWidth / thumbnailSize),
-        );
+      : Math.max(1, Math.ceil(this.clientWidth / thumbnailSize));
 
     this.style.setProperty('--frigate-card-gallery-columns', String(columns));
   }

src/config/types.ts

@@ -976,9 +976,9 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
 //                     Thumbnail Configuration
 // *************************************************************************
 
-// The min/max width thumbnail (Frigate returns a maximum of 175px).
-export const THUMBNAIL_WIDTH_MAX = 175;
+// The min/max width thumbnail.
 export const THUMBNAIL_WIDTH_MIN = 75;
+export const THUMBNAIL_WIDTH_MAX = 300;
 
 const thumbnailControlsBaseDefaults = {
   size: 100,

src/scss/const.scss

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

src/scss/thumbnail-details.scss

@@ -17,7 +17,7 @@ div.title {
 
 div.details {
   flex: 1;
-  justify-content: space-evenly;
+  justify-content: center;
 
   display: flex;
   flex-direction: column;

src/scss/thumbnail-feature-thumbnail.scss

@@ -27,7 +27,7 @@ ha-icon {
     var(--ha-card-border-radius, 4px)
   );
 
-  max-width: var(--frigate-card-thumbnail-size);
+  width: var(--frigate-card-thumbnail-size);
   max-height: 100%;
   aspect-ratio: 1 / 1;