From ce4ea2c564a1095920cfb271bd9101fc07801051 Mon Sep 17 00:00:00 2001 From: Pablo Neves Machado Date: Fri, 4 Jun 2021 14:44:31 +0200 Subject: [PATCH] Fix UI breaks on providing long search keyword in 'Search Box' Allowing words to wrap on whitespaces fixes the issue. I also added word-break for allowing long words to wrap. --- .../components/open_timeline/open_timeline.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx index 5dbb3def9f577..316b6cff766ea 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx +++ b/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( ({ deleteTimelines, @@ -86,9 +92,9 @@ export const OpenTimeline = React.memo( values={{ totalSearchResultsCount, with: ( - + {query.trim().length ? `${i18n.WITH} "${query.trim()}"` : ''} - + ), }} /> @@ -104,9 +110,9 @@ export const OpenTimeline = React.memo( values={{ totalSearchResultsCount, with: ( - + {query.trim().length ? `${i18n.WITH} "${query.trim()}"` : ''} - + ), }} />