Fix long more-info toolbar title. (#1034)

Max 2-lines. Ellipsis overflow on supported browsers.

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 */

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 */
+        @apply --ha-more-info-app-toolbar-title;
-        margin-left: 16px;
       }
 
       state-card-content {
@@ -38,7 +37,6 @@
         .main-title {
           pointer-events: auto;
           cursor: default;
-          line-height: 64px;
         }
       }
 

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 */
+        @apply --ha-more-info-app-toolbar-title;
-        margin-left: 16px;
       }
 
       app-toolbar paper-button {