Fixed the spacing of child accordion items for policy response dialog. (

#71677)
elastic · Jul 15, 2020 · 4e6f0c6 · 4e6f0c6
1 parent 75582eb
commit 4e6f0c6
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/...security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx b/...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>
           );