From 2ab0e40952ccd64db64453ff4dc586e8e12fb7bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Mon, 30 Aug 2021 18:08:16 +0200
Subject: [PATCH] Break overflow in ha-alert (#9885)

---
 gallery/src/demos/demo-ha-alert.ts |  6 ++++++
 src/components/ha-alert.ts         | 13 +++++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/gallery/src/demos/demo-ha-alert.ts b/gallery/src/demos/demo-ha-alert.ts
index 91e421522b..e42c00f20e 100644
--- a/gallery/src/demos/demo-ha-alert.ts
+++ b/gallery/src/demos/demo-ha-alert.ts
@@ -26,6 +26,12 @@ const alerts: {
     description: "This is a test error alert with a title and description",
     type: "error",
   },
+  {
+    title: "Test warning with long string",
+    description:
+      "sensor.lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum",
+    type: "warning",
+  },
   {
     title: "Test success alert",
     description: "This is a test success alert with a title and description",
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index 59388d7e16..a06f74b6be 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -45,21 +45,19 @@ class HaAlert extends LitElement {
   public render() {
     return html`
       <div
-        class=${classMap({
-          "issue-type": true,
+        class="issue-type ${classMap({
           rtl: this.rtl,
           [this.alertType]: true,
-        })}
+        })}"
       >
         <div class="icon">
           <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
         </div>
         <div class="content">
           <div
-            class=${classMap({
-              "main-content": true,
+            class="main-content ${classMap({
               "no-title": !this.title,
-            })}
+            })}"
           >
             ${this.title ? html`<div class="title">${this.title}</div>` : ""}
             <slot></slot>
@@ -129,6 +127,9 @@ class HaAlert extends LitElement {
       justify-content: space-between;
       width: 100%;
     }
+    .main-content {
+      overflow-wrap: anywhere;
+    }
     .title {
       font-weight: bold;
       margin-top: 6px;