From 3851daa8f038e238976d1727f6cdc6fa7be3f4a5 Mon Sep 17 00:00:00 2001
From: Bohdan Tsymbala <bohdan.tsymbala@elastic.co>
Date: Wed, 15 Jul 2020 14:24:05 +0200
Subject: [PATCH] Fixed the spacing of child accordion items for policy
 response dialog. (#71677) (#71821)

---
 .../view/details/policy_response.tsx               | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx
index 8db95f586782c..4cdfaad69eb72 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx
@@ -26,30 +26,36 @@ import {
  * actions the endpoint took to apply the policy configuration.
  */
 const PolicyResponseConfigAccordion = styled(EuiAccordion)`
-  > .euiAccordion__triggerWrapper {
+  .euiAccordion__triggerWrapper {
     padding: ${(props) => props.theme.eui.paddingSizes.s};
   }
+
   &.euiAccordion-isOpen {
     background-color: ${(props) => props.theme.eui.euiFocusBackgroundColor};
   }
+
   .euiAccordion__childWrapper {
     background-color: ${(props) => props.theme.eui.euiColorLightestShade};
   }
+
   .policyResponseAttentionBadge {
     background-color: ${(props) => props.theme.eui.euiColorDanger};
     color: ${(props) => props.theme.eui.euiColorEmptyShade};
   }
+
   .euiAccordion__button {
     :hover,
     :focus {
       text-decoration: none;
     }
   }
+
   :hover:not(.euiAccordion-isOpen) {
     background-color: ${(props) => props.theme.eui.euiColorLightestShade};
   }
 
   .policyResponseActionsAccordion {
+    .euiAccordion__iconWrapper,
     svg {
       height: ${(props) => props.theme.eui.euiIconSizes.small};
       width: ${(props) => props.theme.eui.euiIconSizes.small};
@@ -59,6 +65,10 @@ const PolicyResponseConfigAccordion = styled(EuiAccordion)`
   .policyResponseStatusHealth {
     width: 100px;
   }
+
+  .policyResponseMessage {
+    padding-left: ${(props) => props.theme.eui.paddingSizes.l};
+  }
 `;
 
 const ResponseActions = memo(
@@ -105,7 +115,7 @@ const ResponseActions = memo(
               }
             >
               <EuiText size="xs" data-test-subj="policyResponseMessage">
-                <p>{statuses.message}</p>
+                <p className="policyResponseMessage">{statuses.message}</p>
               </EuiText>
             </EuiAccordion>
           );