[Reporting] Fix report flyout content overflowing (#196552)

kowalczyk-krzysztof · web-flow · commit a2d855649cc4 · 2024-10-17T09:26:27.000+02:00
## 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) |
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
@@ -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>
