Fix positioning of icon and use ternary

src/components/thumbnail-carousel.ts

@@ -109,8 +109,6 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       return;
     }
 
-    console.log("Checking for retain: " + mediaToRender?.frigate?.event?.retain_indefinitely)
-    if (mediaToRender.frigate?.event?.retain_indefinitely == true) {
     return html`<div
       class="embla__slide"
       @click=${(ev) => {
@@ -129,32 +127,12 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
         src="${mediaToRender.thumbnail}"
         title="${mediaToRender.title}"
       />
+      ${mediaToRender?.frigate?.event?.retain_indefinitely ? html`
         <ha-icon
           class="favorite"
           icon="mdi:star"
-        />
+        />` : ``}
     </div>`;
-    } else {
-      return html`<div
-        class="embla__slide"
-        @click=${(ev) => {
-          if (this._carousel && this._carousel.clickAllowed()) {
-            dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
-              slideIndex: slideIndex,
-              target: parent,
-              childIndex: childIndex,
-            });
-          }
-          stopEventFromActivatingCardWideActions(ev);
-        }}
-      >
-        <img
-          aria-label="${mediaToRender.title}"
-          src="${mediaToRender.thumbnail}"
-          title="${mediaToRender.title}"
-        />
-      </div>`;
-    }
   }
 
   /**

src/scss/thumbnail-carousel.scss

@@ -7,6 +7,8 @@
   flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
   opacity: var(--frigate-card-carousel-thumbnail-opacity);
   transition: opacity 0.6s ease, transform 0.2s linear;
+  position: relative;
+  display: inline-block;
 }
 .embla__slide.slide-selected {
   opacity: 1.0;
@@ -28,9 +30,10 @@
 }
 .favorite {
   position: absolute;
-  height: 30px;
+  transform: translate(-50%, -50%);
-  width: 30px;
+  height: 24px;
-  top: 8;
+  width: 24px;
-  right: 8;
+  top: 12%;
+  left: 90%;
   color: yellow;
 }