Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

andrew-goldstein
Copy link
Contributor

[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

After Chrome 95.0.4638.54:

after-chrome

After Firefox 93.0:

after-firefox

After Safari 15.0:

after-safari

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

… the Alert Details flyout

This PR fixes <elastic#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)
@andrew-goldstein andrew-goldstein added release_note:fix v8.0.0 Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. auto-backport Deprecated - use backport:version if exact versions are needed v7.16.0 Team:Threat Hunting:Investigations Security Solution Investigations Team labels Oct 26, 2021
@andrew-goldstein andrew-goldstein self-assigned this Oct 26, 2021
@andrew-goldstein andrew-goldstein requested a review from a team as a code owner October 26, 2021 04:48
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
securitySolution 4.6MB 4.6MB +23.0B

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @andrew-goldstein

@andrew-goldstein andrew-goldstein merged commit 9911883 into elastic:master Oct 26, 2021
@andrew-goldstein andrew-goldstein deleted the prevent-status-badge-stretching-115709 branch October 26, 2021 15:46
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 26, 2021
…e Alert Details flyout (elastic#116237)

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

This PR fixes <elastic#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)
@kibanamachine
Copy link
Contributor

💚 Backport successful

Status Branch Result
7.16

This backport PR will be merged automatically after passing CI.

kibanamachine added a commit that referenced this pull request Oct 26, 2021
…e Alert Details flyout (#116237) (#116320)

## [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)

Co-authored-by: Andrew Goldstein <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-backport Deprecated - use backport:version if exact versions are needed release_note:fix Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Investigations Security Solution Investigations Team v7.16.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Security Solution] UI is broken for status under alert details flyout
5 participants