From 9911883ba4af3a109700a74f6096192c6ed6336e Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
Date: Tue, 26 Oct 2021 09:46:01 -0600
Subject: [PATCH] [Security Solution] Prevents the `Status` badge from
 stretching in the Alert Details flyout (#116237)

## [Security Solution] Prevents the `Status` badge from stretching in the Alert Details flyout

This PR fixes <https://github.com/elastic/kibana/issues/115709> to prevent the `Status` badge from stretching in the Alert Details flyout.

### Screenshots

**Before:**

![before](https://user-images.githubusercontent.com/4459398/138806049-895317b6-2990-43f6-b978-dab1711494a5.png)

After Chrome `95.0.4638.54`:

![after-chrome](https://user-images.githubusercontent.com/4459398/138806164-ce802982-5c5a-4a30-a906-1583e2ba9939.png)

After Firefox `93.0`:

![after-firefox](https://user-images.githubusercontent.com/4459398/138806249-152a6b33-f1b9-4a5b-8607-8da29689d599.png)

After Safari `15.0`:

![after-safari](https://user-images.githubusercontent.com/4459398/138806320-45202b3a-1f84-4a4f-8fd0-107523597a22.png)

### Details

The fix overrides the default value of `EuiFlexGroup`'s `alignItems` prop, which has a default value of `stretch`, per the image below:

![EuiFlexGroup_alignItems](https://user-images.githubusercontent.com/4459398/138805941-96e06533-8df7-447c-bb74-9278a06d39db.png)
---
 .../alert_summary_view.test.tsx.snap          | 32 +++++++++----------
 .../table/field_value_cell.test.tsx           |  6 ++++
 .../event_details/table/field_value_cell.tsx  |  1 +
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap
index 772badd80ce5..d97208a50071 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.status"
               >
                 <div
@@ -207,7 +207,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-@timestamp"
               >
                 <div
@@ -278,7 +278,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.rule.name"
               >
                 <div
@@ -349,7 +349,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.rule.severity"
               >
                 <div
@@ -420,7 +420,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.rule.risk_score"
               >
                 <div
@@ -491,7 +491,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-host.name"
               >
                 <div
@@ -562,7 +562,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-user.name"
               >
                 <div
@@ -633,7 +633,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-source.ip"
               >
                 <div
@@ -828,7 +828,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.status"
               >
                 <div
@@ -899,7 +899,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-@timestamp"
               >
                 <div
@@ -970,7 +970,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.rule.name"
               >
                 <div
@@ -1041,7 +1041,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.rule.severity"
               >
                 <div
@@ -1112,7 +1112,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-signal.rule.risk_score"
               >
                 <div
@@ -1183,7 +1183,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-host.name"
               >
                 <div
@@ -1254,7 +1254,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-user.name"
               >
                 <div
@@ -1325,7 +1325,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
               class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
                 data-test-subj="event-field-source.ip"
               >
                 <div
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.test.tsx
index f6c43da2da8a..d703e736d8b6 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.test.tsx
@@ -180,6 +180,12 @@ describe('FieldValueCell', () => {
       );
     });
 
+    test('it aligns items at the start of the group to prevent content from stretching (by default)', () => {
+      expect(screen.getByTestId(`event-field-${hostIpData.field}`)).toHaveClass(
+        'euiFlexGroup--alignItemsFlexStart'
+      );
+    });
+
     test('it renders link buttons for each of the host ip addresses', () => {
       expect(screen.getAllByRole('button').length).toBe(hostIpValues.length);
     });
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
index dc6c84b8138f..0685582b3388 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
@@ -37,6 +37,7 @@ export const FieldValueCell = React.memo(
   }: FieldValueCellProps) => {
     return (
       <EuiFlexGroup
+        alignItems="flexStart"
         data-test-subj={`event-field-${data.field}`}
         direction="column"
         gutterSize="none"