[8.19] [Security Solution] Fix comma separated process.arg not wraps properly (#223544) (#224878)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Security Solution] Fix comma separated process.arg not wraps
properly (#223544)](#223544)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Agustina Nahir
Ruidiaz","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-06-23T14:02:10Z","message":"[Security
Solution] Fix comma separated process.arg not wraps properly
(#223544)\n\n## Summary\nFixes:
https://github.com/elastic/kibana/issues/129154\nThis PR implements a
spacing adjustment (`8px`) to improve readability\nwhen rendering
multi-valued fields in flyout Overview Tab table.\n\nSpecifically:\n\n-
Adds extra vertical spacing between separate entries for any field\nthat
contains multiple values (with the exception of agent.status
and\nlink).\n\n- Retains normal line-wrap spacing for single values or
text that wraps\nnaturally.\n\n- Adds unit tests to verify correct
spacing behavior in both single- and\nmulti-value scenarios.\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n\nhttps://github.com/user-attachments/assets/403b2f42-f112-43c9-bdfb-ee8571f69dcb\n\n<img
width=\"583\" alt=\"Screenshot 2025-06-12 at 14 25
56\"\nsrc=\"https://github.com/user-attachments/assets/5d3c75ae-8847-41ac-b9fb-cf1300771cda\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<[email protected]>\nCo-authored-by: kibanamachine
<[email protected]>","sha":"12df6b02456f710fa27a6f28c5f1e32938fc6d71","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat
Hunting","Team: SecuritySolution","Team:Threat
Hunting:Investigations","ci:cloud-deploy","backport:version","v9.1.0","v8.19.0"],"title":"[Security
Solution] Fix comma separated process.arg not wraps
properly","number":223544,"url":"https://github.com/elastic/kibana/pull/223544","mergeCommit":{"message":"[Security
Solution] Fix comma separated process.arg not wraps properly
(#223544)\n\n## Summary\nFixes:
https://github.com/elastic/kibana/issues/129154\nThis PR implements a
spacing adjustment (`8px`) to improve readability\nwhen rendering
multi-valued fields in flyout Overview Tab table.\n\nSpecifically:\n\n-
Adds extra vertical spacing between separate entries for any field\nthat
contains multiple values (with the exception of agent.status
and\nlink).\n\n- Retains normal line-wrap spacing for single values or
text that wraps\nnaturally.\n\n- Adds unit tests to verify correct
spacing behavior in both single- and\nmulti-value scenarios.\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n\nhttps://github.com/user-attachments/assets/403b2f42-f112-43c9-bdfb-ee8571f69dcb\n\n<img
width=\"583\" alt=\"Screenshot 2025-06-12 at 14 25
56\"\nsrc=\"https://github.com/user-attachments/assets/5d3c75ae-8847-41ac-b9fb-cf1300771cda\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<[email protected]>\nCo-authored-by: kibanamachine
<[email protected]>","sha":"12df6b02456f710fa27a6f28c5f1e32938fc6d71"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/223544","number":223544,"mergeCommit":{"message":"[Security
Solution] Fix comma separated process.arg not wraps properly
(#223544)\n\n## Summary\nFixes:
https://github.com/elastic/kibana/issues/129154\nThis PR implements a
spacing adjustment (`8px`) to improve readability\nwhen rendering
multi-valued fields in flyout Overview Tab table.\n\nSpecifically:\n\n-
Adds extra vertical spacing between separate entries for any field\nthat
contains multiple values (with the exception of agent.status
and\nlink).\n\n- Retains normal line-wrap spacing for single values or
text that wraps\nnaturally.\n\n- Adds unit tests to verify correct
spacing behavior in both single- and\nmulti-value scenarios.\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n\nhttps://github.com/user-attachments/assets/403b2f42-f112-43c9-bdfb-ee8571f69dcb\n\n<img
width=\"583\" alt=\"Screenshot 2025-06-12 at 14 25
56\"\nsrc=\"https://github.com/user-attachments/assets/5d3c75ae-8847-41ac-b9fb-cf1300771cda\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<[email protected]>\nCo-authored-by: kibanamachine
<[email protected]>","sha":"12df6b02456f710fa27a6f28c5f1e32938fc6d71"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Agustina Nahir Ruidiaz <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: Philippe Oberti <[email protected]>

Author: 4 people

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

@@ -7,7 +7,8 @@
 
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import { EuiFlexItem } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
 import { getAgentTypeForAgentIdField } from '../../../../common/lib/endpoint/utils/get_agent_type_for_agent_id_field';
 import type { ResponseActionAgentType } from '../../../../../common/endpoint/service/response_actions/constants';
 import { AgentStatus } from '../../../../common/components/endpoint/agents/agent_status';
@@ -58,14 +59,24 @@ export const HighlightedFieldsCell: FC<HighlightedFieldsCellProps> = ({
   const agentType: ResponseActionAgentType = useMemo(() => {
     return getAgentTypeForAgentIdField(originalField);
   }, [originalField]);
+  const { euiTheme } = useEuiTheme();
 
   return (
-    <>
+    <React.Fragment
+      css={css`
+        div {
+          margin-bottom: ${euiTheme.size.xs};
+        }
+
+        div:last-child {
+          margin-bottom: 0;
+        }
+      `}
+    >
       {values != null &&
         values.map((value, i) => {
           return (
-            <EuiFlexItem
-              grow={false}
+            <div
               key={`${i}-${value}`}
               data-test-subj={`${value}-${HIGHLIGHTED_FIELDS_CELL_TEST_ID}`}
             >
@@ -85,9 +96,9 @@ export const HighlightedFieldsCell: FC<HighlightedFieldsCellProps> = ({
               ) : (
                 <span data-test-subj={HIGHLIGHTED_FIELDS_BASIC_CELL_TEST_ID}>{value}</span>
               )}
-            </EuiFlexItem>
+            </div>
           );
         })}
-    </>
+    </React.Fragment>
   );
 };

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

@@ -70,11 +70,7 @@ export const TableFieldValueCell = memo(
     }
 
     return (
-      <EuiFlexGroup
-        data-test-subj={`event-field-${data.field}`}
-        direction="column"
-        gutterSize="none"
-      >
+      <EuiFlexGroup data-test-subj={`event-field-${data.field}`} direction="column" gutterSize="xs">
         {values.map((value, i) => {
           if (fieldFromBrowserField == null) {
             return (

x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx

@@ -11,7 +11,7 @@ import type { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { isEmpty, isNumber } from 'lodash/fp';
 import React from 'react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import type { FieldSpec } from '@kbn/data-plugin/common';
 import { EntityTypeToIdentifierField } from '../../../../../../common/entity_analytics/types';
 import { getAgentTypeForAgentIdField } from '../../../../../common/lib/endpoint/utils/get_agent_type_for_agent_id_field';
@@ -119,7 +119,7 @@ const FormattedFieldValueComponent: React.FC<{
         fieldName={fieldName}
         value={value}
         tooltipProps={
-          isUnifiedDataTable ? undefined : { position: 'bottom', className: dataGridToolTipOffset }
+          isUnifiedDataTable ? undefined : { position: 'bottom', css: dataGridToolTipOffset }
         }
       />
     );
@@ -227,7 +227,7 @@ const FormattedFieldValueComponent: React.FC<{
         <EuiToolTip
           data-test-subj="message-tool-tip"
           position="bottom"
-          className={dataGridToolTipOffset}
+          css={dataGridToolTipOffset}
           content={
             <EuiFlexGroup direction="column" gutterSize="none">
               <EuiFlexItem grow={false}>