[8.x] [Cloud Security] Fix for Contextual Flyout UI bugs from Bug Hunt (#196393) (#196499)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Cloud Security] Fix for Contextual Flyout UI bugs from Bug Hunt
(#196393)](#196393)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Rickyanto
Ang","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-16T08:45:56Z","message":"[Cloud
Security] Fix for Contextual Flyout UI bugs from Bug Hunt
(#196393)\n\n## Summary\r\n\r\nThis PR is to address the small UI
enhancements for Contextual Flyouts\r\n<img width=\"649\"
alt=\"Screenshot 2024-10-15 at 10 10
20 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/f4a1dbf1-8800-4060-8674-2318c21a9b58\">\r\n<img
width=\"801\" alt=\"Screenshot 2024-10-15 at 10 10
52 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/e2fdfaed-1b2a-4d66-af6e-420cbf1a26c7\">\r\n\r\nList
of UI updates:\r\n- Fixed Color for Misconfiguration and Vulneabilities
Preview Title\r\n- Fixed Size and Font for Posture Score text in
Misconfiguration Preview\r\ncomponent and Vulnerabilities in
Vulnerabilities Preview component\r\n- Fixed Size for number in
Misconfiguration Preview and Vulnerabilities\r\nPreview component\r\n-
Fixed Paddings for Misconfiguration and Vulnerabilities
Preview\r\ncomponent\r\n- Fixed Padding between 2 preview
components\r\n- Fixed Width size for severity
column","sha":"f049dc048d910293ddb880f98b155fb35ce3120f","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor","v8.16.0"],"title":"[Cloud Security] Fix
for Contextual Flyout UI bugs from Bug
Hunt","number":196393,"url":"https://github.com/elastic/kibana/pull/196393","mergeCommit":{"message":"[Cloud
Security] Fix for Contextual Flyout UI bugs from Bug Hunt
(#196393)\n\n## Summary\r\n\r\nThis PR is to address the small UI
enhancements for Contextual Flyouts\r\n<img width=\"649\"
alt=\"Screenshot 2024-10-15 at 10 10
20 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/f4a1dbf1-8800-4060-8674-2318c21a9b58\">\r\n<img
width=\"801\" alt=\"Screenshot 2024-10-15 at 10 10
52 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/e2fdfaed-1b2a-4d66-af6e-420cbf1a26c7\">\r\n\r\nList
of UI updates:\r\n- Fixed Color for Misconfiguration and Vulneabilities
Preview Title\r\n- Fixed Size and Font for Posture Score text in
Misconfiguration Preview\r\ncomponent and Vulnerabilities in
Vulnerabilities Preview component\r\n- Fixed Size for number in
Misconfiguration Preview and Vulnerabilities\r\nPreview component\r\n-
Fixed Paddings for Misconfiguration and Vulnerabilities
Preview\r\ncomponent\r\n- Fixed Padding between 2 preview
components\r\n- Fixed Width size for severity
column","sha":"f049dc048d910293ddb880f98b155fb35ce3120f"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196393","number":196393,"mergeCommit":{"message":"[Cloud
Security] Fix for Contextual Flyout UI bugs from Bug Hunt
(#196393)\n\n## Summary\r\n\r\nThis PR is to address the small UI
enhancements for Contextual Flyouts\r\n<img width=\"649\"
alt=\"Screenshot 2024-10-15 at 10 10
20 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/f4a1dbf1-8800-4060-8674-2318c21a9b58\">\r\n<img
width=\"801\" alt=\"Screenshot 2024-10-15 at 10 10
52 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/e2fdfaed-1b2a-4d66-af6e-420cbf1a26c7\">\r\n\r\nList
of UI updates:\r\n- Fixed Color for Misconfiguration and Vulneabilities
Preview Title\r\n- Fixed Size and Font for Posture Score text in
Misconfiguration Preview\r\ncomponent and Vulnerabilities in
Vulnerabilities Preview component\r\n- Fixed Size for number in
Misconfiguration Preview and Vulnerabilities\r\nPreview component\r\n-
Fixed Paddings for Misconfiguration and Vulnerabilities
Preview\r\ncomponent\r\n- Fixed Padding between 2 preview
components\r\n- Fixed Width size for severity
column","sha":"f049dc048d910293ddb880f98b155fb35ce3120f"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Rickyanto Ang <[email protected]>

Author: kibanamachine

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,
       }}