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;
}
.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"

View File

@ -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;
}