[Security Solution] Fix whitespace/newlines for exception comments (e…

…lastic#208959)

## Summary

Fixes elastic#208956

## Before

![image](https://github.com/user-attachments/assets/aa9b00e9-da70-4ff2-be18-4073235e8a85)

## After

![image](https://github.com/user-attachments/assets/0fa2a69c-836d-4e98-8ecb-be88d1170519)

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/utils/helpers.tsx

@@ -12,6 +12,8 @@ import { capitalize, get, omit } from 'lodash';
 import type { Moment } from 'moment';
 import moment from 'moment';
 
+import { css } from '@emotion/react';
+
 import type {
   CommentsArray,
   Comment,
@@ -74,6 +76,10 @@ export const formatOperatingSystems = (osTypes: string[]): string => {
     .join(', ');
 };
 
+const commentCss = css`
+  white-space: pre-wrap;
+`;
+
 /**
  * Formats ExceptionItem.comments into EuiCommentList format
  *
@@ -85,7 +91,11 @@ export const getFormattedComments = (comments: CommentsArray): EuiCommentProps[]
     timestamp: moment(commentItem.created_at).format('on MMM Do YYYY @ HH:mm:ss'),
     event: i18n.COMMENT_EVENT,
     timelineAvatar: <EuiAvatar size="l" name={commentItem.created_by.toUpperCase()} />,
-    children: <EuiText size="s">{commentItem.comment}</EuiText>,
+    children: (
+      <EuiText size="s" css={commentCss}>
+        {commentItem.comment}
+      </EuiText>
+    ),
     actions: (
       <WithCopyToClipboard
         data-test-subj="copy-to-clipboard"

x-pack/solutions/security/plugins/security_solution/public/exceptions/utils/ui.helpers.tsx

@@ -11,10 +11,16 @@ import { EuiText, EuiAvatar } from '@elastic/eui';
 
 import type { CommentsArray } from '@kbn/securitysolution-io-ts-list-types';
 
+import { css } from '@emotion/react';
+
 import moment from 'moment';
 import * as i18n from './translations';
 import { WithCopyToClipboard } from '../../common/lib/clipboard/with_copy_to_clipboard';
 
+const commentCss = css`
+  white-space: pre-wrap;
+`;
+
 /**
  * Formats ExceptionItem.comments into EuiCommentList format
  *
@@ -26,7 +32,11 @@ export const getFormattedComments = (comments: CommentsArray): EuiCommentProps[]
     timestamp: moment(commentItem.created_at).format('on MMM Do YYYY @ HH:mm:ss'),
     event: i18n.COMMENT_EVENT,
     timelineAvatar: <EuiAvatar size="l" name={commentItem.created_by.toUpperCase()} />,
-    children: <EuiText size="s">{commentItem.comment}</EuiText>,
+    children: (
+      <EuiText size="s" css={commentCss}>
+        {commentItem.comment}
+      </EuiText>
+    ),
     actions: (
       <WithCopyToClipboard
         data-test-subj="copy-to-clipboard"