From 1992db2144b46e98300cae53d1855904d508ba6c Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Wed, 11 Dec 2024 20:42:05 -0800
Subject: [PATCH] fix: Panel mode should exclude header height (#1738)

* fix: Panel mode should exclude header height

* Update docs to clarify aspect-ratio behavior in a panel
---
 docs/configuration/dimensions.md | 2 ++
 src/scss/card.scss               | 6 ++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/configuration/dimensions.md b/docs/configuration/dimensions.md
index f9731286..79649c41 100644
--- a/docs/configuration/dimensions.md
+++ b/docs/configuration/dimensions.md
@@ -33,6 +33,8 @@ dimensions:
 - `4 / 3` or `4:3`: Default fullscreen ratio.
 - `[W]/[H]` or `[W]:[H]`: Any arbitrary aspect-ratio.
 
+?> When in a [Panel View](https://www.home-assistant.io/dashboards/panel/) the aspect-ratio of the card are pegged to the exact size of the panel. As such, static aspect-ratio parameters will have no effect.
+
 ## Fully expanded reference
 
 [](common/expanded-warning.md ':include')
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 8a854fe2..5c4ab1af 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -40,10 +40,8 @@ frigate-card-loading {
   filter: brightness(75%);
 }
 :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 when
-  // there are multiple cards in the column).
-  height: 100%;
+  // Card always extends to the full height in panel mode
+  height: calc(100vh - var(--header-height));
 }
 
 div.main {