[Security Solution] [Endpoint] Fixes entry card spacing (#118306)

* Fixes entry card spacing

* Decrease padding for collapsible entry card

* Fixes unit test snapshots

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card.tsx

@@ -64,7 +64,7 @@ export const ArtifactEntryCard = memo<ArtifactEntryCardProps>(
 
     return (
       <CardContainerPanel {...commonProps} data-test-subj={dataTestSubj}>
-        <CardSectionPanel>
+        <CardSectionPanel className="top-section">
           <CardHeader
             name={artifact.name}
             createdDate={artifact.created_at}
@@ -82,7 +82,7 @@ export const ArtifactEntryCard = memo<ArtifactEntryCardProps>(
 
           {!hideDescription && (
             <>
-              <EuiSpacer size="s" />
+              <EuiSpacer size="l" />
               <DescriptionField data-test-subj={getTestId('description')}>
                 {artifact.description}
               </DescriptionField>
@@ -91,7 +91,7 @@ export const ArtifactEntryCard = memo<ArtifactEntryCardProps>(
 
           {!hideComments ? (
             <>
-              <EuiSpacer size="s" />
+              <EuiSpacer size="l" />
               <CardComments comments={artifact.comments} data-test-subj={getTestId('comments')} />
             </>
           ) : null}
@@ -99,7 +99,7 @@ export const ArtifactEntryCard = memo<ArtifactEntryCardProps>(
 
         <EuiHorizontalRule margin="none" />
 
-        <CardSectionPanel>
+        <CardSectionPanel className="bottom-section">
           <CriteriaConditions
             os={artifact.os as CriteriaConditionsProps['os']}
             entries={artifact.entries}

x-pack/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_collapsible_card.tsx

@@ -35,7 +35,7 @@ export const ArtifactEntryCollapsibleCard = memo<ArtifactEntryCollapsibleCardPro
 
     return (
       <CardContainerPanel {...commonProps} data-test-subj={dataTestSubj}>
-        <CardSectionPanel>
+        <CardSectionPanel className="artifact-entry-collapsible-card">
           <CardCompressedHeader
             artifact={artifact}
             actions={actions}

x-pack/plugins/security_solution/public/management/components/artifact_entry_card/components/card_header.tsx

@@ -7,6 +7,7 @@
 
 import React, { memo } from 'react';
 import { CommonProps, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import styled from 'styled-components';
 import { DateFieldValue } from './date_field_value';
 import { useTestIdGenerator } from '../../hooks/use_test_id_generator';
 import { CardActionsFlexItem, CardActionsFlexItemProps } from './card_actions_flex_item';
@@ -19,13 +20,17 @@ export interface CardHeaderProps
   updatedDate: string;
 }
 
+const StyledEuiFlexItemSmallBottomMargin = styled(EuiFlexItem)`
+  margin-bottom: 4px !important;
+`;
+
 export const CardHeader = memo<CardHeaderProps>(
   ({ name, createdDate, updatedDate, actions, 'data-test-subj': dataTestSubj }) => {
     const getTestId = useTestIdGenerator(dataTestSubj);
 
     return (
       <EuiFlexGroup responsive={false} alignItems="flexStart" data-test-subj={dataTestSubj}>
-        <EuiFlexItem grow={true}>
+        <StyledEuiFlexItemSmallBottomMargin grow={true}>
           <EuiFlexGroup alignItems="flexStart">
             <EuiFlexItem grow={true}>
               <EuiTitle size="s">
@@ -51,7 +56,7 @@ export const CardHeader = memo<CardHeaderProps>(
               </EuiFlexGroup>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiFlexItem>
+        </StyledEuiFlexItemSmallBottomMargin>
         <CardActionsFlexItem actions={actions} data-test-subj={getTestId('actions')} />
       </EuiFlexGroup>
     );

x-pack/plugins/security_solution/public/management/components/artifact_entry_card/components/card_section_panel.tsx

@@ -16,6 +16,15 @@ export type CardSectionPanelProps = Exclude<
 
 const StyledEuiPanel = styled(EuiPanel)`
   padding: 32px;
+  &.top-section {
+    padding-bottom: 24px;
+  }
+  &.bottom-section {
+    padding-top: 24px;
+  }
+  &.artifact-entry-collapsible-card {
+    padding: 24px !important;
+  }
 `;
 
 export const CardSectionPanel = memo<CardSectionPanelProps>((props) => {