Fix label wrap (#20323)

* Don't wrap headline on ha-menu-item * Don't wrap text on ha-label
home-assistant · Apr 2, 2024 · 169d782 · 169d782
1 parent 8a015f4
commit 169d782
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
@@ -43,6 +43,7 @@ class HaLabel extends LitElement {
           border-radius: 18px;
           color: var(--ha-label-text-color);
           --mdc-icon-size: 12px;
+          text-wrap: nowrap;
         }
         .content > * {
           position: relative;

diff --git a/src/components/ha-menu-item.ts b/src/components/ha-menu-item.ts
@@ -1,7 +1,7 @@
-import { customElement } from "lit/decorators";
+import { MdMenuItem } from "@material/web/menu/menu-item";
 import "element-internals-polyfill";
 import { CSSResult, css } from "lit";
-import { MdMenuItem } from "@material/web/menu/menu-item";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-menu-item")
 export class HaMenuItem extends MdMenuItem {
@@ -30,6 +30,9 @@ export class HaMenuItem extends MdMenuItem {
         --md-menu-item-label-text-color: var(--error-color);
         --md-menu-item-leading-icon-color: var(--error-color);
       }
+      ::slotted([slot="headline"]) {
+        text-wrap: nowrap;
+      }
     `,
   ];
 }