[Security Solution][Alert Details] - fix some UI issues related to em…

…otion/css vs emotion/react (#205664)

## Summary

This recent [PR](#205011) slightly
broke the UI in a couple of small places in the alert details flyout.
Strangely, I did review the PR by pulling down the branch, but only
looked at the places that were impacted by the files modified. The
couple of places where the UI broke were completely different...
My guess it is is related to the fact that in those place we were still
using `@emotion/css` and this might not play nice with some
`styled_components`...

Updating those places to use `@emotion/react` fixed the issues!

| Before fix  | After fix |
| ------------- | ------------- |
|
![broken-1](https://github.com/user-attachments/assets/839760db-da3c-4031-b4be-18645b37c089)
|
![fix-1](https://github.com/user-attachments/assets/cdfae85c-0e63-45be-94dd-5e0f9a698d8a)
|

| Before fix  | After fix |
| ------------- | ------------- |
|
![broken-2](https://github.com/user-attachments/assets/22588529-5afd-491d-ab00-6e07593fb6f7)
|
![fix-2](https://github.com/user-attachments/assets/c078d814-1a33-49dc-aa0d-25dcff555de2)
|

| Before fix  | After fix |
| ------------- | ------------- |
|
![broken-3](https://github.com/user-attachments/assets/082d306c-8866-4e4f-ab18-db7c649101fe)
|
![fix-3](https://github.com/user-attachments/assets/5da76c44-934b-4a2a-a98e-2de34973d02e)
|

In a follow work, we need to remove completely all the
`styled_components` we have.

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,
     ]
   );