From d87d845dbc072aafbe8ef5c5f968dd9f8174c594 Mon Sep 17 00:00:00 2001
From: NovapaX <maarten@oosterwijkbrandpreventie.nl>
Date: Tue, 27 Mar 2018 02:28:35 +0200
Subject: [PATCH] Fix long more-info toolbar title. (#1034)

Max 2-lines. Ellipsis overflow on supported browsers.
---
 src/dialogs/ha-more-info-dialog.html          | 12 ++++++++++++
 src/dialogs/more-info/more-info-controls.html |  4 +---
 src/dialogs/more-info/more-info-settings.html |  3 +--
 3 files changed, 14 insertions(+), 5 deletions(-)

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 {