From 700f09c12c129e6251eccaf09c388beb4a6897ba Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 15 Oct 2022 12:16:43 -0700
Subject: [PATCH] Expand the timeline to 100% height in panel mode.

---
 src/card.ts                           |  8 +++++++-
 src/scss/card.scss                    |  5 +++++
 src/scss/thumbnail-feature-event.scss |  4 ++++
 src/scss/timeline-core.scss           |  5 +++++
 src/utils/ha/index.ts                 | 12 ++++++++++++
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/card.ts b/src/card.ts
index d7ee8069..52377462 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -7,7 +7,7 @@ import {
   TemplateResult,
   unsafeCSS,
 } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
@@ -75,6 +75,7 @@ import {
   getEntityTitle,
   getHassDifferences,
   homeAssistantSignPath,
+  isCardInPanel,
   isHassDifferent,
   isTriggeredState,
   sideLoadHomeAssistantElements,
@@ -168,6 +169,10 @@ export class FrigateCard extends LitElement {
   @state()
   protected _view?: View;
 
+  // Whether or not the card is in panel mode on the dashboard.
+  @property({ attribute: 'panel', type: Boolean, reflect: true })
+  protected _panel = false;
+
   protected _conditionState?: ConditionState;
 
   protected _refMenu: Ref<FrigateCardMenu> = createRef();
@@ -1804,6 +1809,7 @@ export class FrigateCard extends LitElement {
       screenfull.on('change', this._fullscreenHandler.bind(this));
     }
     this.addEventListener('mousemove', this._boundMouseHandler);
+    this._panel = isCardInPanel(this);
   }
 
   /**
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 55cf084c..c4c2736c 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -16,6 +16,11 @@
 :host([dark]) {
   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).
+  height: 100%;
+}
 
 div.main {
   position: relative;
diff --git a/src/scss/thumbnail-feature-event.scss b/src/scss/thumbnail-feature-event.scss
index 970fb6b9..82851164 100644
--- a/src/scss/thumbnail-feature-event.scss
+++ b/src/scss/thumbnail-feature-event.scss
@@ -12,6 +12,10 @@ ha-icon {
   // Safari will occasionally not load thumbnails correctly with display block.
   display: inline-block;
 
+  // Ensure no whitespace around img with inline-block display.
+  vertical-align: top;
+  margin: 0;
+
   border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
 
   max-width: var(--frigate-card-thumbnail-size);
diff --git a/src/scss/timeline-core.scss b/src/scss/timeline-core.scss
index 218d8b5c..7b58c027 100644
--- a/src/scss/timeline-core.scss
+++ b/src/scss/timeline-core.scss
@@ -12,6 +12,11 @@
   position: relative;
 }
 
+:host(:not([mini])) {
+  // Timeline covers 100% of the parent unless it's in mini-mode.
+  height: 100%;
+}
+
 frigate-card-thumbnail {
   height: var(--frigate-card-thumbnail-size);
   width: var(--frigate-card-thumbnail-size);
diff --git a/src/utils/ha/index.ts b/src/utils/ha/index.ts
index 74fd0f6a..516f711c 100644
--- a/src/utils/ha/index.ts
+++ b/src/utils/ha/index.ts
@@ -336,3 +336,15 @@ export const getEntitiesFromHASS = (hass: HomeAssistant, domain?: string): strin
   entities.sort();
   return entities;
 };
+
+/**
+ * Determine if a card is in panel mode.
+ */
+export const isCardInPanel = (card: HTMLElement): boolean => {
+  const parent = card.getRootNode();
+  return !!(
+    parent &&
+    parent instanceof ShadowRoot &&
+    parent.host.tagName === 'HUI-PANEL-VIEW'
+  );
+};