From e49ab7b2ad6a5546396dac9f7e554a53aaaadadc Mon Sep 17 00:00:00 2001
From: Dave Snider <dsnider@elastic.co>
Date: Wed, 12 Jan 2022 08:25:07 -0500
Subject: [PATCH] Fix major mobile issues with security overview

---
 .../overview/components/sidebar/sidebar.tsx   | 23 +++-----------
 .../public/overview/pages/overview.tsx        | 31 +++++++------------
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/overview/components/sidebar/sidebar.tsx b/x-pack/plugins/security_solution/public/overview/components/sidebar/sidebar.tsx
index b8701f3ef1639..f8a0e2e7c83b9 100644
--- a/x-pack/plugins/security_solution/public/overview/components/sidebar/sidebar.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/sidebar/sidebar.tsx
@@ -7,7 +7,6 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
 
 import { ENABLE_NEWS_FEED_SETTING, NEWS_FEED_URL_SETTING } from '../../../../common/constants';
 import { Filters as RecentTimelinesFilters } from '../recent_timelines/filters';
@@ -20,10 +19,6 @@ import * as i18n from '../../pages/translations';
 import { RecentCases } from '../recent_cases';
 import { useGetUserCasesPermissions } from '../../../common/lib/kibana';
 
-const SidebarFlexGroup = styled(EuiFlexGroup)`
-  width: 305px;
-`;
-
 const SidebarSpacerComponent = () => (
   <EuiFlexItem grow={false}>
     <EuiSpacer size="xxl" />
@@ -31,8 +26,6 @@ const SidebarSpacerComponent = () => (
 );
 
 SidebarSpacerComponent.displayName = 'SidebarSpacerComponent';
-const Spacer = React.memo(SidebarSpacerComponent);
-
 export const Sidebar = React.memo<{
   recentTimelinesFilterBy: RecentTimelinesFilterMode;
   setRecentTimelinesFilterBy: (filterBy: RecentTimelinesFilterMode) => void;
@@ -51,15 +44,11 @@ export const Sidebar = React.memo<{
   const hasCasesReadPermissions = useGetUserCasesPermissions()?.read;
 
   return (
-    <SidebarFlexGroup direction="column" gutterSize="none">
+    <EuiFlexGroup direction="column" responsive={false} gutterSize="l">
       {hasCasesReadPermissions && (
-        <>
-          <EuiFlexItem grow={false}>
-            <RecentCases />
-          </EuiFlexItem>
-
-          <Spacer />
-        </>
+        <EuiFlexItem grow={false}>
+          <RecentCases />
+        </EuiFlexItem>
       )}
 
       <EuiFlexItem grow={false}>
@@ -67,15 +56,13 @@ export const Sidebar = React.memo<{
         <StatefulRecentTimelines filterBy={recentTimelinesFilterBy} />
       </EuiFlexItem>
 
-      <Spacer />
-
       <EuiFlexItem grow={false}>
         <StatefulNewsFeed
           enableNewsFeedSetting={ENABLE_NEWS_FEED_SETTING}
           newsFeedSetting={NEWS_FEED_URL_SETTING}
         />
       </EuiFlexItem>
-    </SidebarFlexGroup>
+    </EuiFlexGroup>
   );
 });
 
diff --git a/x-pack/plugins/security_solution/public/overview/pages/overview.tsx b/x-pack/plugins/security_solution/public/overview/pages/overview.tsx
index 1df49fed07358..8de31fa8ebe8a 100644
--- a/x-pack/plugins/security_solution/public/overview/pages/overview.tsx
+++ b/x-pack/plugins/security_solution/public/overview/pages/overview.tsx
@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiShowFor } from '@elastic/eui';
 import React, { useCallback, useState, useMemo } from 'react';
-import styled from 'styled-components';
 
 import { AlertsByCategory } from '../components/alerts_by_category';
 import { FiltersGlobal } from '../../common/components/filters_global';
@@ -37,14 +36,6 @@ import { RiskyHostLinks } from '../components/overview_risky_host_links';
 import { useAlertsPrivileges } from '../../detections/containers/detection_engine/alerts/use_alerts_privileges';
 import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 
-const SidebarFlexItem = styled(EuiFlexItem)`
-  margin-right: 24px;
-`;
-
-const StyledSecuritySolutionPageWrapper = styled(SecuritySolutionPageWrapper)`
-  overflow-x: auto;
-`;
-
 const OverviewComponent = () => {
   const getGlobalFiltersQuerySelector = useMemo(
     () => inputsSelectors.globalFiltersQuerySelector(),
@@ -91,20 +82,22 @@ const OverviewComponent = () => {
             <SiemSearchBar id="global" indexPattern={indexPattern} />
           </FiltersGlobal>
 
-          <StyledSecuritySolutionPageWrapper>
+          <SecuritySolutionPageWrapper>
             {!dismissMessage && !metadataIndexExists && canAccessFleet && (
               <>
                 <EndpointNotice onDismiss={dismissEndpointNotice} />
                 <EuiSpacer size="l" />
               </>
             )}
-            <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
-              <SidebarFlexItem grow={false}>
-                <StatefulSidebar />
-              </SidebarFlexItem>
-
-              <EuiFlexItem grow={true}>
-                <EuiFlexGroup direction="column" gutterSize="none">
+            <EuiFlexGroup>
+              <EuiShowFor sizes={['xl']}>
+                <EuiFlexItem grow={1}>
+                  <StatefulSidebar />
+                </EuiFlexItem>
+              </EuiShowFor>
+
+              <EuiFlexItem grow={3}>
+                <EuiFlexGroup direction="column" responsive={false} gutterSize="none">
                   {hasIndexRead && hasKibanaREAD && (
                     <>
                       <EuiFlexItem grow={false}>
@@ -180,7 +173,7 @@ const OverviewComponent = () => {
                 </EuiFlexGroup>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </StyledSecuritySolutionPageWrapper>
+          </SecuritySolutionPageWrapper>
         </>
       ) : (
         <OverviewEmpty />