fix: Fix alert details table overflow

x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts

@@ -5,7 +5,13 @@
  * 2.0.
  */
 
-import { ALERT_FLYOUT, CELL_TEXT, JSON_TEXT, TABLE_ROWS } from '../../screens/alerts_details';
+import {
+  ALERT_FLYOUT,
+  CELL_TEXT,
+  JSON_TEXT,
+  TABLE_CONTAINER,
+  TABLE_ROWS,
+} from '../../screens/alerts_details';
 
 import {
   expandFirstAlert,
@@ -65,4 +71,20 @@ describe('Alert details with unmapped fields', () => {
         cy.get(CELL_TEXT).eq(4).should('have.text', expectedUnmmappedField.text);
       });
   });
+
+  // This test makes sure that the table does not overflow horizontally
+  it('Table does not scroll horizontally', () => {
+    openTable();
+
+    cy.get(ALERT_FLYOUT)
+      .find(TABLE_CONTAINER)
+      .within(($tableContainer) => {
+        expect($tableContainer[0].scrollLeft).to.equal(0);
+
+        // Try to scroll left and make sure that the table hasn't actually scrolled
+        $tableContainer[0].scroll({ left: 1000 });
+
+        expect($tableContainer[0].scrollLeft).to.equal(0);
+      });
+  });
 });

x-pack/plugins/security_solution/cypress/screens/alerts_details.ts

@@ -34,6 +34,8 @@ export const TABLE_CELL = '.euiTableRowCell';
 
 export const TABLE_TAB = '[data-test-subj="tableTab"]';
 
+export const TABLE_CONTAINER = '[data-test-subj="event-fields-browser"]';
+
 export const TABLE_ROWS = '.euiTableRow';
 
 export const THREAT_DETAILS_ACCORDION = '.euiAccordion__triggerWrapper';

x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx

@@ -281,6 +281,7 @@ export const EventFieldsBrowser = React.memo<Props>(
           rowProps={onSetRowProps}
           search={search}
           sorting={false}
+          data-test-subj="event-fields-browser"
         />
       </TableWrapper>
     );

x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
 import { BrowserField } from '../../../containers/source';
 import { OverflowField } from '../../tables/helpers';
 import { FormattedFieldValue } from '../../../../timelines/components/timeline/body/renderers/formatted_field';
@@ -24,6 +25,14 @@ export interface FieldValueCellProps {
   values: string[] | null | undefined;
 }
 
+const EuiFlexItemMaxWidth100 = euiStyled(EuiFlexItem)`
+  max-width: 100%;
+`;
+
+const EuiFlexGroupMaxWidth100 = euiStyled(EuiFlexGroup)`
+  max-width: 100%;
+`;
+
 export const FieldValueCell = React.memo(
   ({
     contextId,
@@ -36,7 +45,7 @@ export const FieldValueCell = React.memo(
     values,
   }: FieldValueCellProps) => {
     return (
-      <EuiFlexGroup
+      <EuiFlexGroupMaxWidth100
         alignItems="flexStart"
         data-test-subj={`event-field-${data.field}`}
         direction="column"
@@ -46,15 +55,15 @@ export const FieldValueCell = React.memo(
           values.map((value, i) => {
             if (fieldFromBrowserField == null) {
               return (
-                <EuiFlexItem grow={false} key={`${i}-${value}`}>
+                <EuiFlexItemMaxWidth100 grow={false} key={`${i}-${value}`}>
                   <EuiText size="xs" key={`${i}-${value}`}>
                     {value}
                   </EuiText>
-                </EuiFlexItem>
+                </EuiFlexItemMaxWidth100>
               );
             }
             return (
-              <EuiFlexItem
+              <EuiFlexItemMaxWidth100
                 className="eventFieldsTable__fieldValue"
                 grow={false}
                 key={`${i}-${value}`}
@@ -74,10 +83,10 @@ export const FieldValueCell = React.memo(
                     linkValue={(getLinkValue && getLinkValue(data.field)) ?? linkValue}
                   />
                 )}
-              </EuiFlexItem>
+              </EuiFlexItemMaxWidth100>
             );
           })}
-      </EuiFlexGroup>
+      </EuiFlexGroupMaxWidth100>
     );
   }
 );