From 460a8afa8132619b997f33f366bcbc920953da4f Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Thu, 17 Oct 2024 09:26:27 +0200
Subject: [PATCH] [Reporting] Fix report flyout content overflowing (#196552)

## Summary

This PR fixes text overflowing in the report flyout.

Fixes: #153699

## Visuals
| Previous | New |
|-----------------|-----------------|

|![image](https://github.com/user-attachments/assets/ae9c5ead-0689-4a16-8f3f-88342e4fbc94)
|
![image](https://github.com/user-attachments/assets/e7193a8e-8b35-49fa-a98f-4b3cac3a4791)
|

(cherry picked from commit a2d855649cc4794a037133778be9ad885be53bdb)
---
 .../public/management/components/report_info_flyout_content.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx
index f024c16674ce7..33d81949a06bf 100644
--- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx
+++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx
@@ -240,6 +240,7 @@ export const ReportInfoFlyoutContent: FunctionComponent<Props> = ({ info }) => {
               defaultMessage: 'No report generated',
             })}
             color="danger"
+            css={{ overflowWrap: 'break-word' }}
           >
             {errored}
           </EuiCallOut>
@@ -254,6 +255,7 @@ export const ReportInfoFlyoutContent: FunctionComponent<Props> = ({ info }) => {
               defaultMessage: 'Report contains warnings',
             })}
             color="warning"
+            css={{ overflowWrap: 'break-word' }}
           >
             {warnings}
           </EuiCallOut>