fix: Replace max_height with height (#1539)

* fix: Replace `max_height` with `height`

BREAKING CHANGE: This entirely removes `min_height`, and replaces `max_height` with `height`. The behavior is obviously not exactly the same, but the prior behavior did not actually work correctly. CSS does not  limit the height of child elements that are `100%` of their parents height if the parent does not have an explicit height set (this caused spillage over the set max height). As such, it's simpler to just allow the user to set the actual height of the card should they need to do so, with a (hopefully) minor loss of flexibility.

* Test fixes
This commit is contained in:
Dermot Duffy
2024-09-15 17:29:05 -07:00
committed by GitHub
parent e13e53b430
commit f924537025
17 changed files with 72 additions and 52 deletions
+2 -7
View File
@@ -12,11 +12,7 @@
// keeping the background-color within the radius.
border-radius: var(--ha-card-border-radius, 4px);
// 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);
height: var(--frigate-card-height);
// Ensure all clicks at the top level work.
pointer-events: all;
@@ -30,8 +26,7 @@
--frigate-card-expand-height: none;
--frigate-card-expand-aspect-ratio: unset;
--frigate-card-max-height: none;
--frigate-card-min-height: none;
--frigate-card-height: auto;
}
:host([dark]) {
+5 -4
View File
@@ -5,8 +5,9 @@
}
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);
// The gallery will grow indefinitely in the `unconstrained` aspect ratio
// modes, the surround height needs to be limited to something reasonable in
// order for the media filter to still display somewhere the user can
// easily/continually access.
max-height: 100dvh;
}