Skip to content

Conversation

@andrew-goldstein
Copy link
Contributor

[Security Solution] Fixes alerts table Full screen button overlap

This PR fixes an issue reported in #122231 where the alerts table's Full screen button, recently moved to the right side of EuiDataGrid in EUI 43.0.0, overlapped the existing view selector.

Details

In the 8.0 release of the Security Solution, the alerts table Full screen button appears above the table on the left, per the screenshot below:

8_0_alerts_table

Above: The alerts table Full screen button in 8.0

Starting with 8.1 (via EUI 43.0.0), EuiDataGrid's Full screen button has been moved to the right side of EuiDataGrid, per the screenshot below:

data_grid_before_after

Above: EuiDataGrid's full screen icon has moved from left to right

The new location of the Full screen button overlapped the existing alerts table view selector, per the Before screenshot below:

Before

overlapped image

Above: Overlapping icons reported in #122231

This PR fixes the overlap, per the After screenshots below:

After

Chrome 97.0.4692.71:

after_chrome

Firefox 96.0:

after_firefox

Safari 15.2:

after_safari

This PR fixes an issue reported in <elastic#122231> where the alerts table's `Full screen` button, recently [moved to the right side of `EuiDataGrid`](elastic/eui#5334) in [EUI 43.0.0](https://elastic.github.io/eui/#/package/changelog), overlapped the existing view selector.

### Details

In the `8.0` release of the Security Solution, the alerts table `Full screen` button appears above the table on the **left**, per the screenshot below:

![8_0_alerts_table](https://user-images.githubusercontent.com/4459398/149236219-9aac04de-4bbb-4cef-8705-f6bb712fb19e.png)

_Above: The alerts table `Full screen` button in `8.0`_

Starting with `8.1` (via [EUI 43.0.0](https://elastic.github.io/eui/#/package/changelog)), `EuiDataGrid`'s `Full screen` button has been [moved to the right side of `EuiDataGrid`](elastic/eui#5334), per the screenshot below:

![data_grid_before_after](https://user-images.githubusercontent.com/4459398/149237831-61aa7a30-695e-48d8-b016-89a0738d4bd9.png)

_Above: `EuiDataGrid`'s full screen icon has moved from left to right_

The new location of the `Full screen` button overlapped the existing alerts table view selector, per the `Before` screenshot below:

#### Before

![overlapped image](https://user-images.githubusercontent.com/60252716/148024399-24106303-baef-46bf-ad03-c4b53d78bbe8.png)

_Above: Overlapping icons reported in <https://github.com/elastic/kibana/issues/122231>_

This PR fixes the overlap, per the `After` screenshots below:

#### After

Chrome `97.0.4692.71`:

![after_chrome](https://user-images.githubusercontent.com/4459398/149239990-1039d659-67a9-4d09-a910-3f8bdfd179e4.png)

Firefox `96.0`:

![after_firefox](https://user-images.githubusercontent.com/4459398/149239483-590108d8-b6db-4c87-a3e7-579fc33e98a5.png)

Safari `15.2`:

![after_safari](https://user-images.githubusercontent.com/4459398/149239764-1751b89c-125b-44b8-b9b2-984b630e3925.png)
@andrew-goldstein andrew-goldstein added bug Fixes for quality problems that affect the customer experience release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. auto-backport Deprecated - use backport:version if exact versions are needed v8.1.0 Team:Threat Hunting:Investigations Security Solution Threat Hunting Investigations Team labels Jan 13, 2022
@andrew-goldstein andrew-goldstein self-assigned this Jan 13, 2022
@andrew-goldstein andrew-goldstein requested a review from a team as a code owner January 13, 2022 00:22
@elasticmachine
Copy link
Contributor

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

@kibana-ci
Copy link

💚 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
timelines 224.8KB 224.9KB +134.0B

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

cc @andrew-goldstein

@andrew-goldstein andrew-goldstein merged commit 0da9156 into elastic:main Jan 13, 2022
@kibanamachine kibanamachine added the backport:skip This PR does not require backporting label Jan 13, 2022
@andrew-goldstein andrew-goldstein deleted the fix-alerts-full-screen-button-overlap branch January 13, 2022 14:56
@elastic elastic deleted a comment from kibanamachine Jan 13, 2022
@andrew-goldstein andrew-goldstein removed the auto-backport Deprecated - use backport:version if exact versions are needed label Jan 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting bug Fixes for quality problems that affect the customer experience release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Investigations Security Solution Threat Hunting Investigations Team v8.1.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants