From 2a33316e621a64294fa6ccdb58e5755554977b89 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 26 Jun 2022 16:44:39 -0700
Subject: [PATCH] Fix thumbnail proportions in Safari

---
 src/scss/card.scss                    |  4 ++++
 src/scss/thumbnail-feature-event.scss | 15 ++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/scss/card.scss b/src/scss/card.scss
index ae32d3ab..4762a5cc 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -3,6 +3,10 @@
 
   // Anchor absolutes to the outermost part of the card.
   position: relative;
+
+  // Different browsers use different colors as their fullscreen background,
+  // this ensures the same experience across all browsers.
+  background-color: var(--card-background-color);
 }
 
 :host([dark]) {
diff --git a/src/scss/thumbnail-feature-event.scss b/src/scss/thumbnail-feature-event.scss
index 6587c6f9..1ca3328e 100644
--- a/src/scss/thumbnail-feature-event.scss
+++ b/src/scss/thumbnail-feature-event.scss
@@ -1,18 +1,15 @@
 :host {
   display: block;
-  max-width: var(--frigate-card-thumbnail-size);
-  max-height: var(--frigate-card-thumbnail-size);
   overflow: hidden;
-
-  // Restrict images to a maximum of thumbnail size.
-  aspect-ratio: 1 / 1;
 }
 
-img, ha-icon {
+img,
+ha-icon {
   border-radius: var(--ha-card-border-radius, 4px);
 
-  width: 100%;
-  height: 100%;
+  max-width: var(--frigate-card-thumbnail-size);
+  max-height: 100%;
+  aspect-ratio: 1 / 1;
 
   // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
   // should be clipped to fill the thumbnail div whilst maintaining
@@ -26,6 +23,6 @@ ha-icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid rgba(255,255,255,0.3);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   box-sizing: border-box;
 }