jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Break overflow in ha-alert (#9885)

Browse Source
This commit is contained in:
Joakim Sørensen 2021-08-30 18:08:16 +02:00 committed by GitHub
parent dfea80ae96
commit 2ab0e40952
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gallery/src/demos/demo-ha-alert.ts
View File

@ -26,6 +26,12 @@ const alerts: {
description: "This is a test error alert with a title and description", description: "This is a test error alert with a title and description",
type: "error", 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", title: "Test success alert",
description: "This is a test success alert with a title and description", description: "This is a test success alert with a title and description",

13
src/components/ha-alert.ts
View File

@ -45,21 +45,19 @@ class HaAlert extends LitElement {
public render() { public render() {
return html` return html`
<div <div
class=${classMap({ class="issue-type ${classMap({
"issue-type": true,
rtl: this.rtl, rtl: this.rtl,
[this.alertType]: true, [this.alertType]: true,
})} })}"
> >
<div class="icon"> <div class="icon">
<ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon> <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
</div> </div>
<div class="content"> <div class="content">
<div <div
class=${classMap({ class="main-content ${classMap({
"main-content": true,
"no-title": !this.title, "no-title": !this.title,
})} })}"
> >
${this.title ? html`<div class="title">${this.title}</div>` : ""} ${this.title ? html`<div class="title">${this.title}</div>` : ""}
<slot></slot> <slot></slot>
@ -129,6 +127,9 @@ class HaAlert extends LitElement {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
.main-content {
overflow-wrap: anywhere;
}
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 6px; margin-top: 6px;