diff --git a/x-pack/plugins/cases/public/components/all_cases/count.tsx b/x-pack/plugins/cases/public/components/all_cases/count.tsx index e42e52cfdc934..eb33cf1069a9b 100644 --- a/x-pack/plugins/cases/public/components/all_cases/count.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/count.tsx @@ -28,7 +28,7 @@ export const Count: FunctionComponent = ({ refresh }) => { } }, [fetchCasesStatus, refresh]); return ( - + = ({ showTitle = true, userCanCrud, }) => ( - - + + {userCanCrud ? ( <> - + - + = ({ )} - + ); diff --git a/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx b/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx index ec83604987180..0e55abd00a706 100644 --- a/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx @@ -8,11 +8,22 @@ import React, { FunctionComponent } from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { isEmpty } from 'lodash/fp'; +import styled, { css } from 'styled-components'; import { ConfigureCaseButton } from '../configure_cases/button'; import * as i18n from './translations'; import { CasesNavigation, LinkButton } from '../links'; import { ErrorMessage } from '../use_push_to_service/callout/types'; +const ButtonFlexGroup = styled(EuiFlexGroup)` + ${({ theme }) => css` + & { + @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) { + flex-direction: column; + } + } + `} +`; + interface OwnProps { actionsErrors: ErrorMessage[]; configureCasesNavigation: CasesNavigation; @@ -26,7 +37,7 @@ export const NavButtons: FunctionComponent = ({ configureCasesNavigation, createCaseNavigation, }) => ( - + = ({ titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''} /> - + = ({ {i18n.CREATE_TITLE} - + ); diff --git a/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx index 7d02bf2c441d3..bb54fbe410951 100644 --- a/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx @@ -29,9 +29,11 @@ const StatusFilterComponent: React.FC = ({ .map((status) => ({ value: status, inputDisplay: ( - + - + + + {status !== StatusAll && {` (${stats[status]})`}} diff --git a/x-pack/plugins/cases/public/components/case_action_bar/index.tsx b/x-pack/plugins/cases/public/components/case_action_bar/index.tsx index 3448d112dadd1..af17ea0dca895 100644 --- a/x-pack/plugins/cases/public/components/case_action_bar/index.tsx +++ b/x-pack/plugins/cases/public/components/case_action_bar/index.tsx @@ -32,6 +32,10 @@ const MyDescriptionList = styled(EuiDescriptionList)` & { padding-right: ${theme.eui.euiSizeL}; border-right: ${theme.eui.euiBorderThin}; + @media only screen and (max-width: ${theme.eui.euiBreakpoints.m}) { + padding-right: 0; + border-right: 0; + } } `} `; @@ -80,9 +84,9 @@ const CaseActionBarComponent: React.FC = ({ - + {caseData.type !== CaseType.collection && ( - + {i18n.STATUS} = ({ - + {userCanCrud && !disableAlerting && ( - + - + {i18n.SYNC_ALERTS} @@ -129,10 +143,17 @@ const CaseActionBarComponent: React.FC = ({ )} - - - {i18n.CASE_REFRESH} - + + + + {i18n.CASE_REFRESH} + + {userCanCrud && ( diff --git a/x-pack/plugins/cases/public/components/case_header_page/index.tsx b/x-pack/plugins/cases/public/components/case_header_page/index.tsx deleted file mode 100644 index 7e60db1030587..0000000000000 --- a/x-pack/plugins/cases/public/components/case_header_page/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; - -import { HeaderPage, HeaderPageProps } from '../header_page'; - -const CaseHeaderPageComponent: React.FC = (props) => ; - -export const CaseHeaderPage = React.memo(CaseHeaderPageComponent); diff --git a/x-pack/plugins/cases/public/components/case_view/index.tsx b/x-pack/plugins/cases/public/components/case_view/index.tsx index ac7c9ebe08b5a..a44c2cb22010e 100644 --- a/x-pack/plugins/cases/public/components/case_view/index.tsx +++ b/x-pack/plugins/cases/public/components/case_view/index.tsx @@ -26,7 +26,7 @@ import { UserActionTree } from '../user_action_tree'; import { UserList } from '../user_list'; import { useUpdateCase } from '../../containers/use_update_case'; import { getTypedPayload } from '../../containers/utils'; -import { WhitePageWrapper, HeaderWrapper } from '../wrappers'; +import { ContentWrapper, WhitePageWrapper, HeaderWrapper } from '../wrappers'; import { CaseActionBar } from '../case_action_bar'; import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions'; import { EditConnector } from '../edit_connector'; @@ -41,8 +41,6 @@ import { OwnerProvider } from '../owner_context'; import { getConnectorById } from '../utils'; import { DoesNotExist } from './does_not_exist'; -const gutterTimeline = '70px'; // seems to be a timeline reference from the original file - export interface CaseViewComponentProps { allCasesNavigation: CasesNavigation; caseDetailsNavigation: CasesNavigation; @@ -75,11 +73,6 @@ export interface OnUpdateFields { onError?: () => void; } -const MyWrapper = styled.div` - padding: ${({ theme }) => - `${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l}`}; -`; - const MyEuiFlexGroup = styled(EuiFlexGroup)` height: 100%; `; @@ -404,7 +397,7 @@ export const CaseComponent = React.memo( - + {initLoadingData && ( @@ -491,7 +484,7 @@ export const CaseComponent = React.memo( /> - + {timelineUi?.renderTimelineDetailsPanel ? timelineUi.renderTimelineDetailsPanel() : null} diff --git a/x-pack/plugins/cases/public/components/edit_connector/index.tsx b/x-pack/plugins/cases/public/components/edit_connector/index.tsx index 0a20d2f5c8303..df7855fb9ce33 100644 --- a/x-pack/plugins/cases/public/components/edit_connector/index.tsx +++ b/x-pack/plugins/cases/public/components/edit_connector/index.tsx @@ -68,6 +68,9 @@ const DisappearingFlexItem = styled(EuiFlexItem)` $isHidden && ` margin: 0 !important; + & .euiFlexItem { + margin: 0 !important; + } `} `; @@ -244,7 +247,12 @@ export const EditConnector = React.memo( return ( - +

{i18n.CONNECTORS}

 @@ -304,7 +312,7 @@ export const EditConnector = React.memo( {editConnector && ( - + = ({ ) : ( - + </EuiFlexItem> diff --git a/x-pack/plugins/cases/public/components/property_actions/index.tsx b/x-pack/plugins/cases/public/components/property_actions/index.tsx index 170af5fd3b28c..9fa874344864b 100644 --- a/x-pack/plugins/cases/public/components/property_actions/index.tsx +++ b/x-pack/plugins/cases/public/components/property_actions/index.tsx @@ -22,9 +22,9 @@ const ComponentId = 'property-actions'; const PropertyActionButton = React.memo<PropertyActionButtonProps>( ({ disabled = false, onClick, iconType, label }) => ( <EuiButtonEmpty - data-test-subj={`${ComponentId}-${iconType}`} aria-label={label} color="text" + data-test-subj={`${ComponentId}-${iconType}`} iconSide="left" iconType={iconType} isDisabled={disabled} @@ -56,44 +56,43 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio }, []); return ( - <EuiFlexGroup alignItems="flexStart" data-test-subj={ComponentId} gutterSize="none"> - <EuiFlexItem grow={false}> - <EuiPopover - anchorPosition="downRight" - ownFocus - button={ - <EuiButtonIcon - data-test-subj={`${ComponentId}-ellipses`} - aria-label={i18n.ACTIONS_ARIA} - iconType="boxesHorizontal" - onClick={onButtonClick} - /> - } - id="settingsPopover" - isOpen={showActions} - closePopover={onClosePopover} - repositionOnScroll - > - <EuiFlexGroup - alignItems="flexStart" - data-test-subj={`${ComponentId}-group`} - direction="column" - gutterSize="none" - > - {propertyActions.map((action, key) => ( - <EuiFlexItem grow={false} key={`${action.label}${key}`}> - <PropertyActionButton - disabled={action.disabled} - iconType={action.iconType} - label={action.label} - onClick={() => onClosePopover(action.onClick)} - /> - </EuiFlexItem> - ))} - </EuiFlexGroup> - </EuiPopover> - </EuiFlexItem> - </EuiFlexGroup> + <EuiPopover + anchorPosition="downRight" + data-test-subj={ComponentId} + ownFocus + button={ + <EuiButtonIcon + data-test-subj={`${ComponentId}-ellipses`} + aria-label={i18n.ACTIONS_ARIA} + iconType="boxesHorizontal" + onClick={onButtonClick} + /> + } + id="settingsPopover" + isOpen={showActions} + closePopover={onClosePopover} + repositionOnScroll + > + <EuiFlexGroup + alignItems="flexStart" + data-test-subj={`${ComponentId}-group`} + direction="column" + gutterSize="none" + > + {propertyActions.map((action, key) => ( + <EuiFlexItem grow={false} key={`${action.label}${key}`}> + <span> + <PropertyActionButton + disabled={action.disabled} + iconType={action.iconType} + label={action.label} + onClick={() => onClosePopover(action.onClick)} + /> + </span> + </EuiFlexItem> + ))} + </EuiFlexGroup> + </EuiPopover> ); }); diff --git a/x-pack/plugins/cases/public/components/tag_list/index.tsx b/x-pack/plugins/cases/public/components/tag_list/index.tsx index 4e8946a6589a3..925e198e4a478 100644 --- a/x-pack/plugins/cases/public/components/tag_list/index.tsx +++ b/x-pack/plugins/cases/public/components/tag_list/index.tsx @@ -36,6 +36,7 @@ export interface TagListProps { const MyFlexGroup = styled(EuiFlexGroup)` ${({ theme }) => css` + width: 100%; margin-top: ${theme.eui.euiSizeM}; p { font-size: ${theme.eui.euiSizeM}; @@ -43,6 +44,17 @@ const MyFlexGroup = styled(EuiFlexGroup)` `} `; +const ColumnFlexGroup = styled(EuiFlexGroup)` + ${({ theme }) => css` + & { + max-width: 100%; + @media only screen and (max-width: ${theme.eui.euiBreakpoints.m}) { + flex-direction: row; + } + } + `} +`; + export const TagList = React.memo( ({ userCanCrud = true, isLoading, onSubmit, tags }: TagListProps) => { const initialState = { tags }; @@ -80,7 +92,12 @@ export const TagList = React.memo( ); return ( <EuiText> - <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween"> + <EuiFlexGroup + alignItems="center" + gutterSize="xs" + justifyContent="spaceBetween" + responsive={false} + > <EuiFlexItem grow={false}> <h4>{i18n.TAGS}</h4> </EuiFlexItem> @@ -99,9 +116,13 @@ export const TagList = React.memo( <EuiHorizontalRule margin="xs" /> <MyFlexGroup gutterSize="none" data-test-subj="case-tags"> {tags.length === 0 && !isEditTags && <p data-test-subj="no-tags">{i18n.NO_TAGS}</p>} - {!isEditTags && <Tags tags={tags} color="hollow" />} + {!isEditTags && ( + <EuiFlexItem> + <Tags tags={tags} color="hollow" /> + </EuiFlexItem> + )} {isEditTags && ( - <EuiFlexGroup data-test-subj="edit-tags" direction="column"> + <ColumnFlexGroup data-test-subj="edit-tags" direction="column"> <EuiFlexItem> <Form form={form}> <CommonUseField @@ -139,7 +160,7 @@ export const TagList = React.memo( </Form> </EuiFlexItem> <EuiFlexItem> - <EuiFlexGroup gutterSize="s" alignItems="center"> + <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}> <EuiFlexItem grow={false}> <EuiButton color="secondary" @@ -164,7 +185,7 @@ export const TagList = React.memo( </EuiFlexItem> </EuiFlexGroup> </EuiFlexItem> - </EuiFlexGroup> + </ColumnFlexGroup> )} </MyFlexGroup> </EuiText> diff --git a/x-pack/plugins/cases/public/components/tag_list/tags.tsx b/x-pack/plugins/cases/public/components/tag_list/tags.tsx index c91953c3077ca..f3b05972a24a9 100644 --- a/x-pack/plugins/cases/public/components/tag_list/tags.tsx +++ b/x-pack/plugins/cases/public/components/tag_list/tags.tsx @@ -7,21 +7,24 @@ import React, { memo } from 'react'; import { EuiBadgeGroup, EuiBadge, EuiBadgeGroupProps } from '@elastic/eui'; +import styled from 'styled-components'; interface TagsProps { tags: string[]; color?: string; gutterSize?: EuiBadgeGroupProps['gutterSize']; } - +const MyEuiBadge = styled(EuiBadge)` + max-width: 200px; +`; const TagsComponent: React.FC<TagsProps> = ({ tags, color = 'default', gutterSize }) => ( <> {tags.length > 0 && ( <EuiBadgeGroup gutterSize={gutterSize}> {tags.map((tag) => ( - <EuiBadge data-test-subj={`tag-${tag}`} color={color} key={tag}> + <MyEuiBadge data-test-subj={`tag-${tag}`} color={color} key={tag}> {tag} - </EuiBadge> + </MyEuiBadge> ))} </EuiBadgeGroup> )} diff --git a/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx b/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx index 5d234296dd503..338b8577458e3 100644 --- a/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx +++ b/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx @@ -44,8 +44,9 @@ export type ActionsNavigation = CasesNavigation<string, 'configurable'>; const getStatusTitle = (id: string, status: CaseStatuses) => ( <EuiFlexGroup gutterSize="s" - alignItems={'center'} + alignItems="center" data-test-subj={`${id}-user-action-status-title`} + responsive={false} > <EuiFlexItem grow={false}>{i18n.MARKED_CASE_AS}</EuiFlexItem> <EuiFlexItem grow={false}> @@ -110,7 +111,7 @@ const getTagsLabelTitle = (action: CaseUserActions) => { const tags = action.newValue != null ? action.newValue.split(',') : []; return ( - <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span"> + <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span" responsive={false}> <EuiFlexItem data-test-subj="ua-tags-label" grow={false}> {action.action === 'add' && i18n.ADDED_FIELD} {action.action === 'delete' && i18n.REMOVED_FIELD} {i18n.TAGS.toLowerCase()} @@ -125,7 +126,12 @@ const getTagsLabelTitle = (action: CaseUserActions) => { export const getPushedServiceLabelTitle = (action: CaseUserActions, firstPush: boolean) => { const pushedVal = JSON.parse(action.newValue ?? '') as CaseFullExternalService; return ( - <EuiFlexGroup alignItems="baseline" gutterSize="xs" data-test-subj="pushed-service-label-title"> + <EuiFlexGroup + alignItems="baseline" + gutterSize="xs" + data-test-subj="pushed-service-label-title" + responsive={false} + > <EuiFlexItem data-test-subj="pushed-label"> {`${firstPush ? i18n.PUSHED_NEW_INCIDENT : i18n.UPDATE_INCIDENT} ${ pushedVal?.connector_name @@ -190,15 +196,15 @@ export const getUpdateAction = ({ timestamp: <UserActionTimestamp createdAt={action.actionAt} />, timelineIcon: getUpdateActionIcon(action.actionField[0]), actions: ( - <EuiFlexGroup> - <EuiFlexItem> + <EuiFlexGroup responsive={false}> + <EuiFlexItem grow={false}> <UserActionCopyLink getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId} id={action.actionId} /> </EuiFlexItem> {action.action === 'update' && action.commentId != null && ( - <EuiFlexItem> + <EuiFlexItem grow={false}> <UserActionMoveToReference id={action.commentId} outlineComment={handleOutlineComment} /> </EuiFlexItem> )} @@ -252,14 +258,14 @@ export const getAlertAttachment = ({ timestamp: <UserActionTimestamp createdAt={action.actionAt} />, timelineIcon: 'bell', actions: ( - <EuiFlexGroup> - <EuiFlexItem> + <EuiFlexGroup responsive={false}> + <EuiFlexItem grow={false}> <UserActionCopyLink id={action.actionId} getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId} /> </EuiFlexItem> - <EuiFlexItem> + <EuiFlexItem grow={false}> <UserActionShowAlert id={action.actionId} alertId={alertId} @@ -343,15 +349,17 @@ export const getGeneratedAlertsAttachment = ({ timestamp: <UserActionTimestamp createdAt={action.actionAt} />, timelineIcon: 'bell', actions: ( - <EuiFlexGroup> - <EuiFlexItem> + <EuiFlexGroup responsive={false}> + <EuiFlexItem grow={false}> <UserActionCopyLink getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId} id={action.actionId} /> </EuiFlexItem> {renderInvestigateInTimelineActionComponent ? ( - <EuiFlexItem>{renderInvestigateInTimelineActionComponent(alertIds)}</EuiFlexItem> + <EuiFlexItem grow={false}> + {renderInvestigateInTimelineActionComponent(alertIds)} + </EuiFlexItem> ) : null} </EuiFlexGroup> ), diff --git a/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx b/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx index 5fa12b8cfa434..d19ed697f97fe 100644 --- a/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx +++ b/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx @@ -32,12 +32,12 @@ const UserActionContentToolbarComponent = ({ onQuote, userCanCrud, }: UserActionContentToolbarProps) => ( - <EuiFlexGroup> - <EuiFlexItem> + <EuiFlexGroup responsive={false} alignItems="center"> + <EuiFlexItem grow={false}> <UserActionCopyLink id={id} getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId} /> </EuiFlexItem> {userCanCrud && ( - <EuiFlexItem> + <EuiFlexItem grow={false}> <UserActionPropertyActions id={id} editLabel={editLabel} diff --git a/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx b/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx index 19cc804786af1..1522527468fc4 100644 --- a/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx +++ b/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx @@ -56,7 +56,7 @@ export const UserActionMarkdown = ({ const renderButtons = useCallback( ({ cancelAction, saveAction }) => ( - <EuiFlexGroup gutterSize="s" alignItems="center"> + <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}> <EuiFlexItem grow={false}> <EuiButtonEmpty data-test-subj="user-action-cancel-markdown" diff --git a/x-pack/plugins/cases/public/components/user_list/index.tsx b/x-pack/plugins/cases/public/components/user_list/index.tsx index d4d5d56ccc0d5..6a252cfaea20d 100644 --- a/x-pack/plugins/cases/public/components/user_list/index.tsx +++ b/x-pack/plugins/cases/public/components/user_list/index.tsx @@ -49,13 +49,13 @@ const renderUsers = ( handleSendEmail: (emailAddress: string | undefined | null) => void ) => users.map(({ fullName, username, email }, key) => ( - <MyFlexGroup key={key} justifyContent="spaceBetween"> + <MyFlexGroup key={key} justifyContent="spaceBetween" responsive={false}> <EuiFlexItem grow={false}> - <EuiFlexGroup gutterSize="xs"> - <EuiFlexItem> + <EuiFlexGroup gutterSize="xs" responsive={false}> + <EuiFlexItem grow={false}> <MyAvatar name={fullName ? fullName : username ?? ''} /> </EuiFlexItem> - <EuiFlexItem> + <EuiFlexItem grow={false}> <EuiToolTip position="top" content={<p>{fullName ? fullName : username ?? ''}</p>}> <p> <strong> diff --git a/x-pack/plugins/cases/public/components/wrappers/index.tsx b/x-pack/plugins/cases/public/components/wrappers/index.tsx index 3b33e9304da83..4c8a3a681f024 100644 --- a/x-pack/plugins/cases/public/components/wrappers/index.tsx +++ b/x-pack/plugins/cases/public/components/wrappers/index.tsx @@ -21,6 +21,23 @@ export const SectionWrapper = styled.div` `; export const HeaderWrapper = styled.div` - padding: ${({ theme }) => - `${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 0 ${theme.eui.paddingSizes.l}`}; + ${({ theme }) => + ` + padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 0 ${theme.eui.paddingSizes.l}; + @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) { + padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} 0 + ${theme.eui.paddingSizes.s}; + } + `}; +`; +const gutterTimeline = '70px'; // seems to be a timeline reference from the original file +export const ContentWrapper = styled.div` + ${({ theme }) => + ` + padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l}; + @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) { + padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${gutterTimeline} + ${theme.eui.paddingSizes.s}; + } + `}; `; diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx index 636bbf4044cb7..64832bf7f039d 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx @@ -22,11 +22,6 @@ import { UNTITLED_TIMELINE, UNTITLED_TEMPLATE } from '../../timeline/properties/ import { timelineActions } from '../../../store/timeline'; import * as i18n from './translations'; -const ButtonWrapper = styled(EuiFlexItem)` - flex-direction: row; - align-items: center; -`; - const EuiHealthStyled = styled(EuiHealth)` display: block; `; @@ -83,35 +78,36 @@ const ActiveTimelinesComponent: React.FC<ActiveTimelinesProps> = ({ }, [timelineStatus, updated]); return ( - <EuiFlexGroup gutterSize="none"> - <ButtonWrapper grow={false}> - <StyledEuiButtonEmpty - aria-label={i18n.TIMELINE_TOGGLE_BUTTON_ARIA_LABEL({ isOpen, title })} - className={ACTIVE_TIMELINE_BUTTON_CLASS_NAME} - flush="both" - data-test-subj="flyoutOverlay" - size="s" - isSelected={isOpen} - onClick={handleToggleOpen} - > - <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="flexStart"> - <EuiFlexItem grow={false}> - <EuiToolTip position="top" content={tooltipContent}> - <EuiHealthStyled - color={timelineStatus === TimelineStatus.draft ? 'warning' : 'success'} - /> - </EuiToolTip> - </EuiFlexItem> - <EuiFlexItem grow={false}>{title}</EuiFlexItem> - {!isOpen && ( - <EuiFlexItem grow={false}> - <TimelineEventsCountBadge /> - </EuiFlexItem> - )} - </EuiFlexGroup> - </StyledEuiButtonEmpty> - </ButtonWrapper> - </EuiFlexGroup> + <StyledEuiButtonEmpty + aria-label={i18n.TIMELINE_TOGGLE_BUTTON_ARIA_LABEL({ isOpen, title })} + className={ACTIVE_TIMELINE_BUTTON_CLASS_NAME} + flush="both" + data-test-subj="flyoutOverlay" + size="s" + isSelected={isOpen} + onClick={handleToggleOpen} + > + <EuiFlexGroup + gutterSize="none" + alignItems="center" + justifyContent="flexStart" + responsive={false} + > + <EuiFlexItem grow={false}> + <EuiToolTip position="top" content={tooltipContent}> + <EuiHealthStyled + color={timelineStatus === TimelineStatus.draft ? 'warning' : 'success'} + /> + </EuiToolTip> + </EuiFlexItem> + <EuiFlexItem grow={false}>{title}</EuiFlexItem> + {!isOpen && ( + <EuiFlexItem grow={false}> + <TimelineEventsCountBadge /> + </EuiFlexItem> + )} + </EuiFlexGroup> + </StyledEuiButtonEmpty> ); }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx index e54da13ea6056..f0c21b6bc1565 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx @@ -143,9 +143,9 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline hasShadow={false} data-test-subj="timeline-flyout-header-panel" > - <EuiFlexGroup alignItems="center" gutterSize="s"> + <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}> <AddTimelineButton timelineId={timelineId} /> - <EuiFlexItem grow> + <EuiFlexItem grow={false}> <ActiveTimelines timelineId={timelineId} timelineType={timelineType} @@ -156,8 +156,8 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline /> </EuiFlexItem> {show && ( - <EuiFlexItem grow={false}> - <EuiFlexGroup gutterSize="s"> + <EuiFlexItem> + <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}> {(activeTab === TimelineTabs.query || activeTab === TimelineTabs.eql) && ( <EuiFlexItem grow={false}> <InspectButton