Add max_height and min_height dimension options.

src/scss/card.scss

@@ -12,7 +12,13 @@
   // keeping the background-color within the radius.
   border-radius: var(--ha-card-border-radius, 4px);
 
-  // The standard HA header is 56 pixels wide, so that much off the top (header)
+  // Necessary to ensure children adhere to height of outer container (without
+  // this gallery surround is not correctly positioned in the middle of the
+  // card, but rather the middle of the scrolling gallery container).
+  max-height: var(--frigate-card-max-height);
+  min-height: var(--frigate-card-min-height);
+
+  // The standard HA header is 56 pixels tall, so that much off the top (header)
   // and bottom (to maintain center), before doing the calculation of
   // max-height. This matters on small mobile devices in landscape orientation.
   --frigate-card-expand-max-height: calc( ( 100vh - (2 * 56px) ) * 0.85 );
@@ -20,6 +26,9 @@
   --frigate-card-expand-width: none;
   --frigate-card-expand-height: none;
   --frigate-card-expand-aspect-ratio: unset;
+
+  --frigate-card-max-height: none;
+  --frigate-card-min-height: none;
 }
 
 :host([dark]) {
@@ -27,7 +36,8 @@
 }
 :host([panel]) {
   // Card always extends to the full allowed height in panel mode (in non-panel
-  // mode this would cause the card to expand to the height of a column).
+  // mode this would cause the card to expand to the height of a column when
+  // there are multiple cards in the column).
   height: 100%;
 }
 

src/scss/gallery-core.scss

@@ -0,0 +1,51 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: auto;
+
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
+
+  --frigate-card-gallery-gap: 3px;
+  --frigate-card-gallery-columns: 4;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
+  grid-auto-rows: min-content;
+  gap: var(--frigate-card-gallery-gap);
+}
+
+// Hide scrollbar for Chrome, Safari and Opera
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+frigate-card-thumbnail {
+  height: 100%;
+  max-height: var(--frigate-card-thumbnail-size);
+}
+frigate-card-thumbnail:not([details]) {
+  width: 100%;
+}
+frigate-card-thumbnail.selected {
+  border: 4px solid var(--accent-color);
+  // Because this is box-sizing: border-box, the border is effectively
+  // 'padding'. To get the curved borders to line up between the thumbnail and
+  // this outer border, we need to add the size of the border to the thumbnail
+  // image border radius.
+  // Related: https://www.30secondsofcode.org/articles/s/css-nested-border-radius
+  border-radius: calc(
+    var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px)) + 4px
+  );
+}
+
+frigate-card-progress-indicator.top {
+  // The top loading progress indicator should span the whole width.
+  grid-column: 1/-1;
+}

src/scss/gallery.scss

@@ -2,50 +2,11 @@
   width: 100%;
   height: 100%;
   display: block;
-  overflow: auto;
-
-  // Hide scrollbar: IE and Edge
-  -ms-overflow-style: none;
-
-  // Hide scrollbar: Firefox
-  scrollbar-width: none;
-
-  --frigate-card-gallery-gap: 3px;
-  --frigate-card-gallery-columns: 4;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
-  grid-auto-rows: min-content;
-  gap: var(--frigate-card-gallery-gap);
-}
-
-// Hide scrollbar for Chrome, Safari and Opera
-:host::-webkit-scrollbar {
-  display: none;
-}
-
-frigate-card-thumbnail {
-  height: 100%;
-  max-height: var(--frigate-card-thumbnail-size);
-}
-frigate-card-thumbnail:not([details]) {
-  width: 100%;
-}
-frigate-card-thumbnail.selected {
-  border: 4px solid var(--accent-color);
-  // Because this is box-sizing: border-box, the border is effectively
-  // 'padding'. To get the curved borders to line up between the thumbnail and
-  // this outer border, we need to add the size of the border to the thumbnail
-  // image border radius.
-  // Related: https://www.30secondsofcode.org/articles/s/css-nested-border-radius
-  border-radius: calc(
-    var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px)) + 4px
-  );
-}
-
-frigate-card-progress-indicator.top {
-  // The top loading progress indicator should span the whole width.
-  grid-column: 1/-1;
+frigate-card-surround-basic {
+  // This must be re-specified (in addition to on the top card element) to
+  // ensure the filter 'tab' on the gallery drawer is correctly included on the
+  // non-scrolling part of the gallery.
+  max-height: var(--frigate-card-max-height);
 }