diff --git a/src/dialogs/ha-more-info-dialog.html b/src/dialogs/ha-more-info-dialog.html index 5e4c8540be..cea15ac66f 100644 --- a/src/dialogs/ha-more-info-dialog.html +++ b/src/dialogs/ha-more-info-dialog.html @@ -20,6 +20,18 @@ more-info-controls, more-info-settings { --more-info-header-background: var(--secondary-background-color); --more-info-header-color: var(--primary-text-color); + --ha-more-info-app-toolbar-title: { + /* Design guideline states 24px, changed to 16 to align with state info */ + margin-left: 16px; + line-height: 1.3em; + max-height: 2.6em; + overflow: hidden; + /* webkit and blink still support simple multiline text-overflow */ + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + } } /* overrule the ha-style-dialog max-height on small screens */ diff --git a/src/dialogs/more-info/more-info-controls.html b/src/dialogs/more-info/more-info-controls.html index 29e6d206a0..2fb8d1a010 100644 --- a/src/dialogs/more-info/more-info-controls.html +++ b/src/dialogs/more-info/more-info-controls.html @@ -18,8 +18,7 @@ } app-toolbar [main-title] { - /* Design guideline states 24px, changed to 16 to align with state info */ - margin-left: 16px; + @apply --ha-more-info-app-toolbar-title; } state-card-content { @@ -38,7 +37,6 @@ .main-title { pointer-events: auto; cursor: default; - line-height: 64px; } } diff --git a/src/dialogs/more-info/more-info-settings.html b/src/dialogs/more-info/more-info-settings.html index d5b1e3589e..ac76b2ab85 100644 --- a/src/dialogs/more-info/more-info-settings.html +++ b/src/dialogs/more-info/more-info-settings.html @@ -17,8 +17,7 @@ } app-toolbar [main-title] { - /* Design guideline states 24px, changed to 16 to align with more-info-controls */ - margin-left: 16px; + @apply --ha-more-info-app-toolbar-title; } app-toolbar paper-button {