Merge pull request #739 from dermotduffy/safari-gallery-proportions

Fix thumbnail proportions in Safari

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]) {

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%;
+  max-width: var(--frigate-card-thumbnail-size);
-  height: 100%;
+  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;
 }