From 57c26bb130276b3981d61849b92de8b564c56175 Mon Sep 17 00:00:00 2001
From: Julian Gernun <17549662+jcger@users.noreply.github.com>
Date: Fri, 19 Dec 2025 14:35:42 +0100
Subject: [PATCH] [ResponseOps][Rules] Fix alert detail flyout  (#247055)

## Summary

Closes https://github.com/elastic/kibana/issues/247030

<details>
  <summary>Screenshot after fix</summary>
<img width="1261" height="1115" alt="Screenshot 2025-12-19 at 12 26 27"
src="https://github.com/user-attachments/assets/59d22e6a-69c1-47ac-b7e6-5e1b7441d791"
/>

</details>

The `reason` field can be a very long text with long unbreakable
segments in it (URLs, comma separated values). I added a wrapping class
that takes care of that via css, it effectively adds:

```
word-break: break-word;
overflow-wrap: break-word;
```

These CSS properties have zero visible effect on content that doesn't
need to break - short text, numbers, badges, links all render exactly
the same. The CSS only kicks in when there's actually a long unbreakable
string.
The overhead of one extra `<div>` per row is negligible.

Example of broken `reason` field content:
```
Document count is 1 in the last 5m for 2025-12-19T10:32:24.229Z,Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322),Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322),680,16099067,680,78.218.15.245,sample_web_logs,,,POINT (-82.52886139 42.91095778),US,US,US:US,www.elastic.co,www.elastic.co,kibana_sample_data_logs,kibana_sample_data_logs,78.218.15.245,win 7,win 7,18253611008,78.218.15.245 - - [2018-08-03T10:32:24.229Z] "GET /site-search HTTP/1.1" 200 680 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)",78.218.15.245 - - [2018-08-03T10:32:24.229Z] "GET /site-search HTTP/1.1" 200 680 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)",http://twitter.com/success/nikolai-budarin,/site-search,/site-search,200,200,success,info,info,success,2025-12-19T10:32:24.229Z,https://www.elastic.co/solutions/site-search,https://www.elastic.co/solutions/site-search,2025-12-19T10:32:24.229Z. Alert when greater than 0.
```

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 2b31b9712ef09b77e3f5d83e38bbd5625744d704)
---
 .../alerts-table/components/alert_detail_flyout.tsx  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/platform/packages/shared/response-ops/alerts-table/components/alert_detail_flyout.tsx b/src/platform/packages/shared/response-ops/alerts-table/components/alert_detail_flyout.tsx
index 3c28f8a222a4f..024f7b6f4491d 100644
--- a/src/platform/packages/shared/response-ops/alerts-table/components/alert_detail_flyout.tsx
+++ b/src/platform/packages/shared/response-ops/alerts-table/components/alert_detail_flyout.tsx
@@ -73,11 +73,13 @@ export const AlertDetailFlyout = ({
                 title: (column.displayAsText as string) ?? column.id,
                 description:
                   value != null ? (
-                    <DefaultCellValue
-                      columnId={column.id}
-                      alert={alert}
-                      openLinksInNewTab={openLinksInNewTab}
-                    />
+                    <div className="eui-textBreakWord">
+                      <DefaultCellValue
+                        columnId={column.id}
+                        alert={alert}
+                        openLinksInNewTab={openLinksInNewTab}
+                      />
+                    </div>
                   ) : (
                     '—'
                   ),