Fix gallery sizing in Safari

src/scss/card.scss

@@ -97,19 +97,24 @@ frigate-card-live.hidden {
 
   // Hide corners on Safari fullscreen.
   border-radius: 0px;
+
+  // Theme styles may set these which is not helpful in fullscreen mode, reset
+  // them.
+  box-shadow: none;
   margin: 0;
 }
-:host(:fullscreen) ha-card {
+
+// Need to use an id selector here to overcome theme styling that may
+// incorrectly apply to ha-card style.
+:host(:fullscreen) #ha-card {
   @include fullscreen-ha-card;
 }
-// Need to use an id selector here to overcome card styling that is incorrectly
-// shown in Safari that causes the wrong margin to apply in fullscreen mode.
 :host(:-webkit-full-screen) #ha-card {
   @include fullscreen-ha-card;
 }
-:host(:-moz-full-screen) ha-card {
+:host(:-moz-full-screen) #ha-card {
   @include fullscreen-ha-card;
 }
-:host(:-ms-fullscreen) ha-card {
+:host(:-ms-fullscreen) #ha-card {
   @include fullscreen-ha-card;
 }

src/scss/gallery.scss

@@ -23,7 +23,7 @@
   display: none;
 }
 
-ha-card {
+:host ha-card {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,13 +38,23 @@ ha-card {
   line-height: 1;
   overflow: hidden;
 
+  // Some themes override these values (with high CSS specificity) which is
+  // intended for full cards rather than internal ones. Since we use multiple of
+  // these for folders, we cannot use an ID and need to resort to !important.
+  margin: 0px !important;
+  box-shadow: none !important;
+
   transition: transform 0.2s linear;
 }
 ha-card:hover {
-  transform: scale(1.04)
+  transform: scale(1.04);
 }
 
-ha-card, frigate-card-thumbnail {
+ha-card,
+frigate-card-thumbnail {
   height: 100%;
   max-height: var(--frigate-card-thumbnail-size);
-}
+}
+frigate-card-thumbnail:not([details]) {
+  width: 100%;
+}

src/scss/live-webrtc.scss

@@ -6,10 +6,10 @@
 
 /* Don't drop shadow or have radius for nested webrtc card */
 #webrtc ha-card {
-  box-shadow: none;
   border-radius: 0px;
   background-color: black;
 
-  // To get the WebRTC player to line up correctly in Safari.
+  // To get the WebRTC player to line up correctly with some themes.
   margin: 0px;
+  box-shadow: none;
 }