From 1c81fe582636debb2015aa5b36e37e1d572e3508 Mon Sep 17 00:00:00 2001
From: Bohdan Tsymbala <bohdan.tsymbala@elastic.co>
Date: Thu, 16 Jul 2020 16:42:41 +0200
Subject: [PATCH] Fixed a bit policy details header layout for small screens.
 (#72042)

---
 .../management/pages/policy/view/agents_summary.tsx      | 2 +-
 .../management/pages/policy/view/policy_details.tsx      | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/agents_summary.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/agents_summary.tsx
index fca3408b79c54..921493e239c0f 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/agents_summary.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/agents_summary.tsx
@@ -73,7 +73,7 @@ export const AgentsSummary = memo<AgentsSummaryProps>((props) => {
   }, []);
 
   return (
-    <EuiFlexGroup gutterSize="xl" data-test-subj="policyAgentsSummary">
+    <EuiFlexGroup gutterSize="xl" responsive={false} data-test-subj="policyAgentsSummary">
       {stats.map(({ key, title, health }) => {
         return (
           <EuiFlexItem grow={false} key={key}>
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
index 8fbc167670b41..9576e1aedcaf1 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
@@ -16,6 +16,7 @@ import {
   EuiConfirmModal,
   EuiCallOut,
   EuiLoadingSpinner,
+  EuiHideFor,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -182,9 +183,11 @@ export const PolicyDetails = React.memo(() => {
           error={policyAgentStatusSummary?.error ?? 0}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
-        <VerticalDivider spacing="l" />
-      </EuiFlexItem>
+      <EuiHideFor sizes={['xs', 's']}>
+        <EuiFlexItem>
+          <VerticalDivider spacing="l" />
+        </EuiFlexItem>
+      </EuiHideFor>
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty onClick={handleCancelOnClick} data-test-subj="policyDetailsCancelButton">
           <FormattedMessage