Fix issue where help icon overlapped with header text on mobile devices (#3868)

This commit is contained in:
Phi Dong 2019-10-03 02:50:36 -07:00 committed by Bram Kragten
parent 351ba3e701
commit 95b76dbb85
2 changed files with 13 additions and 3 deletions

View File

@ -44,6 +44,11 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
margin-top: 24px; margin-top: 24px;
} }
.sectionHeader {
position: relative;
padding-right: 40px;
}
.node-info { .node-info {
margin-left: 16px; margin-left: 16px;
} }
@ -77,7 +82,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
.toggle-help-icon { .toggle-help-icon {
position: absolute; position: absolute;
top: 6px; top: -6px;
right: 0; right: 0;
color: var(--primary-color); color: var(--primary-color);
} }
@ -102,7 +107,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
<!-- Node card --> <!-- Node card -->
<ha-config-section is-wide="[[isWide]]"> <ha-config-section is-wide="[[isWide]]">
<div style="position: relative" slot="header"> <div class="sectionHeader" slot="header">
<span>Z-Wave Node Management</span> <span>Z-Wave Node Management</span>
<paper-icon-button <paper-icon-button
class="toggle-help-icon" class="toggle-help-icon"

View File

@ -51,7 +51,7 @@ export class ZwaveNetwork extends LitElement {
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
return html` return html`
<ha-config-section .isWide="${this.isWide}"> <ha-config-section .isWide="${this.isWide}">
<div style="position: relative" slot="header"> <div class="sectionHeader" slot="header">
<span> <span>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.config.zwave.network_management.header" "ui.panel.config.zwave.network_management.header"
@ -234,6 +234,11 @@ export class ZwaveNetwork extends LitElement {
margin-top: 24px; margin-top: 24px;
} }
.sectionHeader {
position: relative;
padding-right: 40px;
}
.network-status { .network-status {
text-align: center; text-align: center;
} }