[Cloud Security] Fix for Contextual Flyout UI bugs from Bug Hunt (#19…

…6393)

## Summary

This PR is to address the small UI enhancements for Contextual Flyouts
<img width="649" alt="Screenshot 2024-10-15 at 10 10 20 AM"
src="https://github.com/user-attachments/assets/f4a1dbf1-8800-4060-8674-2318c21a9b58">
<img width="801" alt="Screenshot 2024-10-15 at 10 10 52 AM"
src="https://github.com/user-attachments/assets/e2fdfaed-1b2a-4d66-af6e-420cbf1a26c7">

List of UI updates:
-  Fixed Color for Misconfiguration and Vulneabilities Preview Title
- Fixed Size and Font for Posture Score text in Misconfiguration Preview
component and Vulnerabilities in Vulnerabilities Preview component
- Fixed Size for number in Misconfiguration Preview and Vulnerabilities
Preview component
- Fixed Paddings for Misconfiguration and Vulnerabilities Preview
component
-  Fixed Padding between 2 preview components
-  Fixed Width size for severity column

(cherry picked from commit f049dc0)

x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/vulnerabilities_findings_details_table.tsx

@@ -154,7 +154,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ queryName }: { queryN
         'xpack.securitySolution.flyout.left.insights.vulnerability.table.ruleColumnName',
         { defaultMessage: 'CVSS' }
       ),
-      width: '12.5%',
+      width: '15%',
     },
     {
       field: 'vulnerability',
@@ -171,7 +171,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ queryName }: { queryN
         'xpack.securitySolution.flyout.left.insights.vulnerability.table.ruleColumnName',
         { defaultMessage: 'Severity' }
       ),
-      width: '12.5%',
+      width: '20%',
     },
     {
       field: 'vulnerability',
@@ -182,7 +182,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ queryName }: { queryN
         'xpack.securitySolution.flyout.left.insights.vulnerability.table.ruleColumnName',
         { defaultMessage: 'Package' }
       ),
-      width: '50%',
+      width: '40%',
     },
   ];
 

x-pack/plugins/security_solution/public/cloud_security_posture/components/entity_insight.tsx

@@ -64,14 +64,14 @@ export const EntityInsight = <T,>({
     insightContent.push(
       <>
         <MisconfigurationsPreview name={name} fieldName={fieldName} isPreviewMode={isPreviewMode} />
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
       </>
     );
   if (isVulnerabilitiesFindingForHost && hasVulnerabilitiesFindings)
     insightContent.push(
       <>
         <VulnerabilitiesPreview name={name} isPreviewMode={isPreviewMode} />
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
       </>
     );
   return (

x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx

@@ -84,12 +84,12 @@ const MisconfigurationPreviewScore = ({
       <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem>
           <EuiTitle size="s">
-            <h1>{`${Math.round((passedFindings / (passedFindings + failedFindings)) * 100)}%`}</h1>
+            <h3>{`${Math.round((passedFindings / (passedFindings + failedFindings)) * 100)}%`}</h3>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText
-            size="m"
+            size="xs"
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -225,8 +225,7 @@ export const MisconfigurationsPreview = ({
       header={{
         iconType: !isPreviewMode && hasMisconfigurationFindings ? 'arrowStart' : '',
         title: (
-          <EuiText
-            size="xs"
+          <EuiTitle
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -235,7 +234,7 @@ export const MisconfigurationsPreview = ({
               id="xpack.securitySolution.flyout.right.insights.misconfigurations.misconfigurationsTitle"
               defaultMessage="Misconfigurations"
             />
-          </EuiText>
+          </EuiTitle>
         ),
         link: hasMisconfigurationFindings ? link : undefined,
       }}

x-pack/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx

@@ -48,12 +48,12 @@ const VulnerabilitiesCount = ({
       <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem>
           <EuiTitle size="s">
-            <h1>{vulnerabilitiesTotal}</h1>
+            <h3>{vulnerabilitiesTotal}</h3>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText
-            size="m"
+            size="xs"
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -162,8 +162,7 @@ export const VulnerabilitiesPreview = ({
       header={{
         iconType: !isPreviewMode && hasVulnerabilitiesFindings ? 'arrowStart' : '',
         title: (
-          <EuiText
-            size="xs"
+          <EuiTitle
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -172,7 +171,7 @@ export const VulnerabilitiesPreview = ({
               id="xpack.securitySolution.flyout.right.insights.vulnerabilities.vulnerabilitiesTitle"
               defaultMessage="Vulnerabilities"
             />
-          </EuiText>
+          </EuiTitle>
         ),
         link,
       }}