[ResponseOps][Rules] Fix alert detail flyout (#247055)

jcger · kibanamachine · web-flow · commit 2b31b9712ef0 · 2025-12-19T08:35:42.000-05:00
## Summary Closes #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>
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
@@ -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>
                   ) : (
                     '—'
                   ),
