Skip to content

Commit

Permalink
[Security Solution] Prevents the Status badge from stretching in th…
Browse files Browse the repository at this point in the history
…e Alert Details flyout (#116237)

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

This PR fixes <#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)
  • Loading branch information
andrew-goldstein authored Oct 26, 2021
1 parent b17e01d commit 9911883
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 16 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 9911883

Please sign in to comment.