Enable smooth panning between past/live.

src/scss/card.scss

@@ -37,8 +37,7 @@ div.main {
   width: 100%;
   height: 100%;
   margin: auto;
-  display: flex;
-  justify-content: center;
+  display: block;
 
   // Necessary to get Safari to show border-radius correctly.
   transform: translateZ(0);
@@ -118,11 +117,6 @@ ha-card.triggered {
   animation: warning-pulse 5s infinite;
 }
 
-frigate-card-live.hidden {
-  // Live view will be rendered but hidden for live preloading.
-  display: none;
-}
-
 /************
  * Fullscreen
  *************/
@@ -188,4 +182,4 @@ web-dialog::part(dialog) {
   // Fixes to render the dialog correctly in Safari.
   border-radius: 0px;
   background: transparent;
-}
+}

src/scss/live.scss

@@ -1,12 +1,5 @@
 :host {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-frigate-card-live-carousel {
-  flex: 1;
-  min-height: 0;
+  display: block;
 }

src/scss/surround-basic.scss

@@ -14,8 +14,9 @@
   overflow: hidden;
 }
 
-::slotted:not([name]) {
+::slotted(:not([slot])) {
   // Expand the main body to fill available content not otherwise used by the
-  // surround.
+  // named slots around the surround.
   flex: 1;
+  min-height: 0px;
 }

src/scss/surround.scss

@@ -2,4 +2,4 @@
   width: 100%;
   height: 100%;
   display: block;
-}
+}

src/scss/views.scss

@@ -0,0 +1,14 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+:host([hidden]),
+.hidden {
+  // Views content is hidden in these cases:
+  // - Live view being preloaded but live view not active.
+  // - Overall views component marked as hidden (e.g. error message to display
+  //   at the card level).
+  display: none;
+}