[RAC] [Cases] Fix responsiveness in Cases UI (#103766)

x-pack/plugins/cases/public/components/all_cases/count.tsx

@@ -28,7 +28,7 @@ export const Count: FunctionComponent<CountProps> = ({ refresh }) => {
     }
   }, [fetchCasesStatus, refresh]);
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup responsive={false}>
       <EuiFlexItem grow={false}>
         <Stats
           dataTestSubj="openStatsHeader"

x-pack/plugins/cases/public/components/all_cases/header.tsx

@@ -8,7 +8,7 @@
 import React, { FunctionComponent } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import styled, { css } from 'styled-components';
-import { CaseHeaderPage } from '../case_header_page';
+import { HeaderPage } from '../header_page';
 import * as i18n from './translations';
 import { Count } from './count';
 import { CasesNavigation } from '../links';
@@ -32,6 +32,11 @@ const FlexItemDivider = styled(EuiFlexItem)`
       border-right: ${theme.eui.euiBorderThin};
       padding-right: ${theme.eui.euiSize};
       margin-right: ${theme.eui.euiSize};
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.l}) {
+        padding-right: 0;
+        border-right: 0;
+        margin-right: 0;
+      }
     }
   `}
 `;
@@ -44,21 +49,15 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
   showTitle = true,
   userCanCrud,
 }) => (
-  <CaseHeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="m"
-      responsive={false}
-      wrap={true}
-      data-test-subj="all-cases-header"
-    >
+  <HeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
+    <EuiFlexGroup alignItems="center" gutterSize="m" wrap={true} data-test-subj="all-cases-header">
       {userCanCrud ? (
         <>
-          <FlexItemDivider grow={false}>
+          <FlexItemDivider>
             <Count refresh={refresh} />
           </FlexItemDivider>
 
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem>
             <NavButtons
               actionsErrors={actionsErrors}
               configureCasesNavigation={configureCasesNavigation}
@@ -74,5 +73,5 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
         </EuiFlexItem>
       )}
     </EuiFlexGroup>
-  </CaseHeaderPage>
+  </HeaderPage>
 );

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<Props> = ({
   configureCasesNavigation,
   createCaseNavigation,
 }) => (
-  <EuiFlexGroup>
+  <ButtonFlexGroup responsive={false}>
     <EuiFlexItem grow={false}>
       <ConfigureCaseButton
         configureCasesNavigation={configureCasesNavigation}
@@ -37,7 +48,7 @@ export const NavButtons: FunctionComponent<Props> = ({
         titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''}
       />
     </EuiFlexItem>
-    <EuiFlexItem grow={false}>
+    <EuiFlexItem>
       <LinkButton
         fill
         onClick={createCaseNavigation.onClick}
@@ -48,5 +59,5 @@ export const NavButtons: FunctionComponent<Props> = ({
         {i18n.CREATE_TITLE}
       </LinkButton>
     </EuiFlexItem>
-  </EuiFlexGroup>
+  </ButtonFlexGroup>
 );

x-pack/plugins/cases/public/components/all_cases/status_filter.tsx

@@ -29,9 +29,11 @@ const StatusFilterComponent: React.FC<Props> = ({
     .map((status) => ({
       value: status,
       inputDisplay: (
-        <EuiFlexGroup gutterSize="xs" alignItems={'center'}>
+        <EuiFlexGroup gutterSize="xs" alignItems={'center'} responsive={false}>
           <EuiFlexItem grow={false}>
-            <Status type={status} />
+            <span>
+              <Status type={status} />
+            </span>
           </EuiFlexItem>
           {status !== StatusAll && <EuiFlexItem grow={false}>{` (${stats[status]})`}</EuiFlexItem>}
         </EuiFlexGroup>

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<CaseActionBarProps> = ({
     <EuiFlexGroup gutterSize="l" justifyContent="flexEnd" data-test-subj="case-action-bar-wrapper">
       <EuiFlexItem grow={false}>
         <MyDescriptionList compressed>
-          <EuiFlexGroup>
+          <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
             {caseData.type !== CaseType.collection && (
-              <EuiFlexItem grow={false} data-test-subj="case-view-status">
+              <EuiFlexItem data-test-subj="case-view-status">
                 <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
                 <EuiDescriptionListDescription>
                   <StatusContextMenu
@@ -107,11 +111,21 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiDescriptionList compressed>
-          <EuiFlexGroup gutterSize="l" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="l"
+            alignItems="center"
+            responsive={false}
+            justifyContent="spaceBetween"
+          >
             {userCanCrud && !disableAlerting && (
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiDescriptionListTitle>
-                  <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
+                  <EuiFlexGroup
+                    component="span"
+                    alignItems="center"
+                    gutterSize="xs"
+                    responsive={false}
+                  >
                     <EuiFlexItem grow={false}>
                       <span>{i18n.SYNC_ALERTS}</span>
                     </EuiFlexItem>
@@ -129,10 +143,17 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
                 </EuiDescriptionListDescription>
               </EuiFlexItem>
             )}
-            <EuiFlexItem>
-              <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
-                {i18n.CASE_REFRESH}
-              </EuiButtonEmpty>
+            <EuiFlexItem grow={false}>
+              <span>
+                <EuiButtonEmpty
+                  data-test-subj="case-refresh"
+                  flush="left"
+                  iconType="refresh"
+                  onClick={onRefresh}
+                >
+                  {i18n.CASE_REFRESH}
+                </EuiButtonEmpty>
+              </span>
             </EuiFlexItem>
             {userCanCrud && (
               <EuiFlexItem grow={false} data-test-subj="case-view-actions">

x-pack/plugins/cases/public/components/case_header_page/index.tsx

@@ -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<HeaderPageProps> = (props) => <HeaderPage {...props} />;
-
-export const CaseHeaderPage = React.memo(CaseHeaderPageComponent);

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<CaseComponentProps>(
           </HeaderPage>
         </HeaderWrapper>
         <WhitePageWrapper>
-          <MyWrapper>
+          <ContentWrapper>
             <EuiFlexGroup>
               <EuiFlexItem grow={6}>
                 {initLoadingData && (
@@ -491,7 +484,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-          </MyWrapper>
+          </ContentWrapper>
         </WhitePageWrapper>
         {timelineUi?.renderTimelineDetailsPanel ? timelineUi.renderTimelineDetailsPanel() : null}
       </>

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 (
       <EuiText>
-        <MyFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
+        <MyFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          justifyContent="spaceBetween"
+          responsive={false}
+        >
           <EuiFlexItem grow={false}>
             <h4>{i18n.CONNECTORS}</h4>
           </EuiFlexItem>
@@ -304,7 +312,7 @@ export const EditConnector = React.memo(
           </EuiFlexItem>
           {editConnector && (
             <EuiFlexItem>
-              <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButton
                     color="secondary"

x-pack/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`EditableTitle it renders 1`] = `
 <EuiFlexGroup
   alignItems="center"
   gutterSize="none"
+  responsive={false}
 >
   <EuiFlexItem
     grow={false}

x-pack/plugins/cases/public/components/header_page/editable_title.tsx

@@ -100,7 +100,7 @@ const EditableTitleComponent: React.FC<EditableTitleProps> = ({
       <EuiFlexItem />
     </EuiFlexGroup>
   ) : (
-    <EuiFlexGroup alignItems="center" gutterSize="none">
+    <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
       <EuiFlexItem grow={false}>
         <Title title={title} />
       </EuiFlexItem>

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>
   );
 });
 

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>

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>
     )}

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>
   ),

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}

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"

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>

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};
+      }
+    `};
 `;

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>
   );
 };
 

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