From 066ed48c95da8be2d3d41e54b3f10ccb35723aad Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Tue, 15 Oct 2024 16:35:57 +0200
Subject: [PATCH] vmui: fix alert display with long messages (#7228)

### Describe Your Changes

Fix `Alert` component to prevent it from overflowing the screen when
displaying long messages.

Related issue: #7207

### Checklist

The following checks are **mandatory**:

- [x] My change adheres [VictoriaMetrics contributing
guidelines](https://docs.victoriametrics.com/contributing/).

---------

Signed-off-by: Zakhar Bessarab <z.bessarab@victoriametrics.com>
Signed-off-by: hagen1778 <roman@victoriametrics.com>
Co-authored-by: hagen1778 <roman@victoriametrics.com>
(cherry picked from commit 86029de0d4c3da3f5030da11e72aca4ad133c60c)
---
 app/vmui/packages/vmui/src/components/Main/Alert/style.scss | 2 ++
 docs/VictoriaLogs/CHANGELOG.md                              | 1 +
 docs/changelog/CHANGELOG.md                                 | 1 +
 3 files changed, 4 insertions(+)

diff --git a/app/vmui/packages/vmui/src/components/Main/Alert/style.scss b/app/vmui/packages/vmui/src/components/Main/Alert/style.scss
index 29c9587567..65100123cd 100644
--- a/app/vmui/packages/vmui/src/components/Main/Alert/style.scss
+++ b/app/vmui/packages/vmui/src/components/Main/Alert/style.scss
@@ -51,6 +51,8 @@
   &__content {
     filter: brightness(0.6);
     white-space: pre-line;
+    text-wrap: balance;
+    overflow-wrap: anywhere;
   }
 
   &_success {
diff --git a/docs/VictoriaLogs/CHANGELOG.md b/docs/VictoriaLogs/CHANGELOG.md
index f0a66a5bc5..df9a496667 100644
--- a/docs/VictoriaLogs/CHANGELOG.md
+++ b/docs/VictoriaLogs/CHANGELOG.md
@@ -21,6 +21,7 @@ according to [these docs](https://docs.victoriametrics.com/victorialogs/quicksta
 
 * BUGFIX: avoid possible panic when logs for a new day are ingested during execution of concurrent queries.
 * BUGFIX: avoid panic at `lib/logstorage.(*blockResultColumn).forEachDictValue()` when [stats with additional filters](https://docs.victoriametrics.com/victorialogs/logsql/#stats-with-additional-filters). The panic has been introduced in [v0.33.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.33.0-victorialogs) in [this commit](https://github.com/VictoriaMetrics/VictoriaMetrics/commit/a350be48b68330ee1a487e1fb09b002d3be45163).
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix error messages rendering from overflowing the screen with long messages. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/7207).
 
 
 ## [v0.35.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.35.0-victorialogs)
diff --git a/docs/changelog/CHANGELOG.md b/docs/changelog/CHANGELOG.md
index 74f5d0273b..8442b4419a 100644
--- a/docs/changelog/CHANGELOG.md
+++ b/docs/changelog/CHANGELOG.md
@@ -27,6 +27,7 @@ See also [LTS releases](https://docs.victoriametrics.com/lts-releases/).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add the ability to cancel running queries. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/7097).
 
 * BUGFIX: [vmgateway](https://docs.victoriametrics.com/vmgateway/): fix possible panic during parsing of a token without `vm_access` claim. This issue was introduced in v1.104.0.
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix error messages rendering from overflowing the screen with long messages. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/7207).
 
 ## [v1.104.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.104.0)