Fix UI breaks on providing long search keyword in 'Search Box' (elast…

…ic#101385)

Allowing words to wrap on whitespaces fixes the issue.
I also added word-break for allowing long words to wrap.

x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx

@@ -9,6 +9,7 @@ import { EuiPanel, EuiBasicTable } from '@elastic/eui';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import styled from 'styled-components';
 import { TimelineType, TimelineStatus } from '../../../../common/types/timeline';
 import { ImportDataModal } from '../../../common/components/import_data_modal';
 import {
@@ -30,6 +31,11 @@ import * as i18n from './translations';
 import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
 import { OpenTimelineProps, OpenTimelineResult, ActionTimelineToShow } from './types';
 
+const QueryText = styled.span`
+  white-space: normal;
+  word-break: break-word;
+`;
+
 export const OpenTimeline = React.memo<OpenTimelineProps>(
   ({
     deleteTimelines,
@@ -86,9 +92,9 @@ export const OpenTimeline = React.memo<OpenTimelineProps>(
           values={{
             totalSearchResultsCount,
             with: (
-              <span data-test-subj="selectable-query-text">
+              <QueryText data-test-subj="selectable-query-text">
                 {query.trim().length ? `${i18n.WITH} "${query.trim()}"` : ''}
-              </span>
+              </QueryText>
             ),
           }}
         />
@@ -104,9 +110,9 @@ export const OpenTimeline = React.memo<OpenTimelineProps>(
           values={{
             totalSearchResultsCount,
             with: (
-              <span data-test-subj="selectable-query-text">
+              <QueryText data-test-subj="selectable-query-text">
                 {query.trim().length ? `${i18n.WITH} "${query.trim()}"` : ''}
-              </span>
+              </QueryText>
             ),
           }}
         />