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 {