[8.x] [Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664) (#205928)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][Alert Details] - fix some UI issues related to
emotion/css vs emotion/react
(#205664)](#205664)

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

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-08T16:00:28Z","message":"[Security
Solution][Alert Details] - fix some UI issues related to emotion/css vs
emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent
[PR](#205011) slightly\r\nbroke
the UI in a couple of small places in the alert details
flyout.\r\nStrangely, I did review the PR by pulling down the branch,
but only\r\nlooked at the places that were impacted by the files
modified. The\r\ncouple of places where the UI broke were completely
different...\r\nMy guess it is is related to the fact that in those
place we were still\r\nusing `@emotion/css` and this might not play nice
with some\r\n`styled_components`...\r\n\r\nUpdating those places to use
`@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix
|\r\n| ------------- | -------------
|\r\n|\r\n![broken-1](https://github.com/user-attachments/assets/839760db-da3c-4031-b4be-18645b37c089)\r\n|\r\n![fix-1](https://github.com/user-attachments/assets/cdfae85c-0e63-45be-94dd-5e0f9a698d8a)\r\n|\r\n\r\n|
Before fix | After fix |\r\n| ------------- | -------------
|\r\n|\r\n![broken-2](https://github.com/user-attachments/assets/22588529-5afd-491d-ab00-6e07593fb6f7)\r\n|\r\n![fix-2](https://github.com/user-attachments/assets/c078d814-1a33-49dc-aa0d-25dcff555de2)\r\n|\r\n\r\n|
Before fix | After fix |\r\n| ------------- | -------------
|\r\n|\r\n![broken-3](https://github.com/user-attachments/assets/082d306c-8866-4e4f-ab18-db7c649101fe)\r\n|\r\n![fix-3](https://github.com/user-attachments/assets/5da76c44-934b-4a2a-a98e-2de34973d02e)\r\n|\r\n\r\nIn
a follow work, we need to remove completely all
the\r\n`styled_components` we
have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0"],"title":"[Security
Solution][Alert Details] - fix some UI issues related to emotion/css vs
emotion/react","number":205664,"url":"https://github.com/elastic/kibana/pull/205664","mergeCommit":{"message":"[Security
Solution][Alert Details] - fix some UI issues related to emotion/css vs
emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent
[PR](#205011) slightly\r\nbroke
the UI in a couple of small places in the alert details
flyout.\r\nStrangely, I did review the PR by pulling down the branch,
but only\r\nlooked at the places that were impacted by the files
modified. The\r\ncouple of places where the UI broke were completely
different...\r\nMy guess it is is related to the fact that in those
place we were still\r\nusing `@emotion/css` and this might not play nice
with some\r\n`styled_components`...\r\n\r\nUpdating those places to use
`@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix
|\r\n| ------------- | -------------
|\r\n|\r\n![broken-1](https://github.com/user-attachments/assets/839760db-da3c-4031-b4be-18645b37c089)\r\n|\r\n![fix-1](https://github.com/user-attachments/assets/cdfae85c-0e63-45be-94dd-5e0f9a698d8a)\r\n|\r\n\r\n|
Before fix | After fix |\r\n| ------------- | -------------
|\r\n|\r\n![broken-2](https://github.com/user-attachments/assets/22588529-5afd-491d-ab00-6e07593fb6f7)\r\n|\r\n![fix-2](https://github.com/user-attachments/assets/c078d814-1a33-49dc-aa0d-25dcff555de2)\r\n|\r\n\r\n|
Before fix | After fix |\r\n| ------------- | -------------
|\r\n|\r\n![broken-3](https://github.com/user-attachments/assets/082d306c-8866-4e4f-ab18-db7c649101fe)\r\n|\r\n![fix-3](https://github.com/user-attachments/assets/5da76c44-934b-4a2a-a98e-2de34973d02e)\r\n|\r\n\r\nIn
a follow work, we need to remove completely all
the\r\n`styled_components` we
have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078"}},"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/205664","number":205664,"mergeCommit":{"message":"[Security
Solution][Alert Details] - fix some UI issues related to emotion/css vs
emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent
[PR](#205011) slightly\r\nbroke
the UI in a couple of small places in the alert details
flyout.\r\nStrangely, I did review the PR by pulling down the branch,
but only\r\nlooked at the places that were impacted by the files
modified. The\r\ncouple of places where the UI broke were completely
different...\r\nMy guess it is is related to the fact that in those
place we were still\r\nusing `@emotion/css` and this might not play nice
with some\r\n`styled_components`...\r\n\r\nUpdating those places to use
`@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix
|\r\n| ------------- | -------------
|\r\n|\r\n![broken-1](https://github.com/user-attachments/assets/839760db-da3c-4031-b4be-18645b37c089)\r\n|\r\n![fix-1](https://github.com/user-attachments/assets/cdfae85c-0e63-45be-94dd-5e0f9a698d8a)\r\n|\r\n\r\n|
Before fix | After fix |\r\n| ------------- | -------------
|\r\n|\r\n![broken-2](https://github.com/user-attachments/assets/22588529-5afd-491d-ab00-6e07593fb6f7)\r\n|\r\n![fix-2](https://github.com/user-attachments/assets/c078d814-1a33-49dc-aa0d-25dcff555de2)\r\n|\r\n\r\n|
Before fix | After fix |\r\n| ------------- | -------------
|\r\n|\r\n![broken-3](https://github.com/user-attachments/assets/082d306c-8866-4e4f-ab18-db7c649101fe)\r\n|\r\n![fix-3](https://github.com/user-attachments/assets/5da76c44-934b-4a2a-a98e-2de34973d02e)\r\n|\r\n\r\nIn
a follow work, we need to remove completely all
the\r\n`styled_components` we
have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <[email protected]>

Author: kibanamachine

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx

@@ -15,7 +15,7 @@ import {
   useEuiFontSize,
   EuiSkeletonText,
 } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { getOr } from 'lodash/fp';
 import { i18n } from '@kbn/i18n';
 import { HOST_NAME_FIELD_NAME } from '../../../../timelines/components/timeline/body/renderers/constants';

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx

@@ -15,7 +15,7 @@ import {
   useEuiFontSize,
   EuiSkeletonText,
 } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { getOr } from 'lodash/fp';
 import { i18n } from '@kbn/i18n';
 import { useDocumentDetailsContext } from '../../shared/context';

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/insight_distribution_bar.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import {
   EuiFlexGroup,
   EuiFlexItem,

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx

@@ -8,7 +8,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { useMisconfigurationPreview } from '@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview';
 import { buildGenericEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
 import {

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx

@@ -8,7 +8,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
 import { buildGenericEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
 import { getVulnerabilityStats, hasVulnerabilitiesData } from '@kbn/cloud-security-posture';

x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx

@@ -20,6 +20,7 @@ import {
   useEuiTheme,
   EuiToolTip,
   EuiSkeletonText,
+  useEuiFontSize,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { EuiPanelProps, IconType } from '@elastic/eui';
@@ -126,6 +127,7 @@ export const ExpandablePanel: FC<PropsWithChildren<ExpandablePanelPanelProps>> =
   );
 
   const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
 
   const headerLeftSection = useMemo(
     () => (
@@ -159,8 +161,8 @@ export const ExpandablePanel: FC<PropsWithChildren<ExpandablePanelPanelProps>> =
               <EuiToolTip content={link?.tooltip}>
                 <EuiLink
                   css={css`
-                    font-size: 12px;
-                    font-weight: 700;
+                    font-size: ${xsFontSize};
+                    font-weight: ${euiTheme.font.weight.bold};
                   `}
                   data-test-subj={`${dataTestSubj}TitleLink`}
                   onClick={link?.callback}
@@ -178,15 +180,17 @@ export const ExpandablePanel: FC<PropsWithChildren<ExpandablePanelPanelProps>> =
       </EuiFlexItem>
     ),
     [
+      euiTheme.size.xl,
+      euiTheme.size.s,
+      euiTheme.font.weight.bold,
       dataTestSubj,
       expandable,
       children,
       toggleIcon,
-      link?.callback,
       iconType,
-      euiTheme.size.s,
-      euiTheme.size.xl,
+      link?.callback,
       link?.tooltip,
+      xsFontSize,
       title,
     ]
   );