jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-17 14:26:35 +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",
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",

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

@ -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;