Fix thumbnails for non-gallery views.

src/components/gallery.ts

@@ -1,6 +1,5 @@
 // TODO: Add details & controls & size support
-// TODO: Remove mini support if it's not actually needed?
-// TODO: automatic upgrade for thumbnail sizes in px
+// TODO: automatic upgrade for thumbnail sizes in px and menu buttons in px
 // TODO: automatic remove of min_columns
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

src/components/menu.ts

@@ -60,7 +60,10 @@ export class FrigateCardMenu extends LitElement {
   set menuConfig(menuConfig: MenuConfig) {
     this._menuConfig = menuConfig;
     if (menuConfig) {
-      this.style.setProperty('--frigate-card-menu-button-size', menuConfig.button_size);
+      this.style.setProperty(
+        '--frigate-card-menu-button-size',
+        `${menuConfig.button_size}px`,
+      );
     }
     // Store the menu mode as an attribute (used for CSS attribute selectors).
     this.setAttribute('data-mode', menuConfig.mode);

src/components/thumbnail.ts

@@ -30,20 +30,16 @@ export class FrigateCardThumbnailDetails extends LitElement {
     return html`<div class="left">
         <div class="larger">${prettifyFrigateName(this.event.label)}</div>
         <div>
-          <span>
             <span class="heading">${localize('event.start')}:</span>
-            ${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}
-          </span>
+            <span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span>
         </div>
         <div>
-          <span>
             <span class="heading">${localize('event.duration')}:</span>
-            ${getEventDurationString(this.event)}
-          </span>
+            <span>${getEventDurationString(this.event)}</span>
         </div>
       </div>
       <div class="right">
-        <div class="larger">${score}</div>
+        <span class="larger">${score}</span>
       </div>`;
   }