From 199e17d0b11e57e75ea6b784f8a2d24f6e784abd Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Sun, 1 Nov 2020 16:04:52 -0500
Subject: [PATCH] Use paper-tabs while in edit mode (#7563)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/lovelace/hui-root.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index ad92d4a9f8..77f0ca4199 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -17,6 +17,7 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
 import {
   css,
   CSSResult,
@@ -381,7 +382,7 @@ class HUIRoot extends LitElement {
           ${this._editMode
             ? html`
                 <div sticky>
-                  <ha-tabs
+                  <paper-tabs
                     scrollable
                     .selected="${this._curView}"
                     @iron-activate="${this._handleViewSelected}"
@@ -461,7 +462,7 @@ class HUIRoot extends LitElement {
                           </mwc-icon-button>
                         `
                       : ""}
-                  </ha-tabs>
+                  </paper-tabs>
                 </div>
               `
             : ""}
@@ -798,13 +799,17 @@ class HUIRoot extends LitElement {
           width: 100%;
           height: 100%;
           margin-left: 4px;
+        }
+        paper-tabs {
+          margin-left: 12px;
+          margin-left: max(env(safe-area-inset-left), 12px);
+          margin-right: env(safe-area-inset-right);
+        }
+        ha-tabs, paper-tabs {
           --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
           text-transform: uppercase;
         }
-        .edit-mode ha-tabs {
-          margin-left: max(env(safe-area-inset-left), 24px);
-          margin-right: max(env(safe-area-inset-right), 24px);
-        }
+
         .edit-mode {
           background-color: var(--dark-color, #455a64);
           color: var(--text-dark-color);