From 051218e29bf7a19ae72b608fa823e4fa4e90cb87 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 11 Nov 2020 14:08:53 +0100
Subject: [PATCH] Fix view height in edit mode (#7646)

---
 src/panels/lovelace/hui-root.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 8ebb8df92e..cde2ad9130 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -102,16 +102,13 @@ class HUIRoot extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-app-layout id="layout">
-        <app-header
-          slot="header"
-          effects="waterfall"
-          class=${classMap({
-            "edit-mode": this._editMode,
-          })}
-          fixed
-          condenses
-        >
+      <ha-app-layout
+        class=${classMap({
+          "edit-mode": this._editMode,
+        })}
+        id="layout"
+      >
+        <app-header slot="header" effects="waterfall" fixed condenses>
           ${this._editMode
             ? html`
                 <app-toolbar class="edit-mode">
@@ -819,7 +816,8 @@ class HUIRoot extends LitElement {
           text-transform: uppercase;
         }
 
-        .edit-mode {
+        .edit-mode app-header,
+        .edit-mode app-toolbar {
           background-color: var(--dark-color, #455a64);
           color: var(--text-dark-color);
         }
@@ -864,6 +862,12 @@ class HUIRoot extends LitElement {
           position: relative;
           display: flex;
         }
+        /**
+         * In edit mode we have the tab bar on a new line *
+         */
+        .edit-mode #view {
+          min-height: calc(100vh - var(--header-height) - 48px);
+        }
         #view > * {
           /**
           * The view could get larger than the window in Firefox