From 95b76dbb85a5ac0f290effbb9060d7a2da1a1490 Mon Sep 17 00:00:00 2001
From: Phi Dong <phidong@gmail.com>
Date: Thu, 3 Oct 2019 02:50:36 -0700
Subject: [PATCH] Fix issue where help icon overlapped with header text on
 mobile devices (#3868)

---
 src/panels/config/zwave/ha-config-zwave.js | 9 +++++++--
 src/panels/config/zwave/zwave-network.ts   | 7 ++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js
index 6169a54bdc..ccfaaa09ef 100644
--- a/src/panels/config/zwave/ha-config-zwave.js
+++ b/src/panels/config/zwave/ha-config-zwave.js
@@ -44,6 +44,11 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
           margin-top: 24px;
         }
 
+        .sectionHeader {
+          position: relative;
+          padding-right: 40px;
+        }
+
         .node-info {
           margin-left: 16px;
         }
@@ -77,7 +82,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         .toggle-help-icon {
           position: absolute;
-          top: 6px;
+          top: -6px;
           right: 0;
           color: var(--primary-color);
         }
@@ -102,7 +107,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <!-- Node card -->
         <ha-config-section is-wide="[[isWide]]">
-          <div style="position: relative" slot="header">
+          <div class="sectionHeader" slot="header">
             <span>Z-Wave Node Management</span>
             <paper-icon-button
               class="toggle-help-icon"
diff --git a/src/panels/config/zwave/zwave-network.ts b/src/panels/config/zwave/zwave-network.ts
index 41dd3457f7..e0b5a3bb54 100644
--- a/src/panels/config/zwave/zwave-network.ts
+++ b/src/panels/config/zwave/zwave-network.ts
@@ -51,7 +51,7 @@ export class ZwaveNetwork extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       <ha-config-section .isWide="${this.isWide}">
-        <div style="position: relative" slot="header">
+        <div class="sectionHeader" slot="header">
           <span>
             ${this.hass!.localize(
               "ui.panel.config.zwave.network_management.header"
@@ -234,6 +234,11 @@ export class ZwaveNetwork extends LitElement {
           margin-top: 24px;
         }
 
+        .sectionHeader {
+          position: relative;
+          padding-right: 40px;
+        }
+
         .network-status {
           text-align: center;
         }