maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[SIEM] Update Timeline to use the latest euiFlyoutBody style (#59524)

Browse source 
## [SIEM] Update Timeline to use the latest euiFlyoutBody style

[A recent update to EUI](https://github.com/elastic/eui/pull/2837) requires an update to Timeline to restore its original padding, per the before / after screenshots below:

### Before

The previous code, which was using the `euiFlyoutBody__overflow` style, has extra padding (before this PR):

![timeline-padding-before-chrome](https://user-images.githubusercontent.com/4459398/76060425-81e37500-5f3e-11ea-8083-a58297afee85.png)

### After Chrome `80.0.3987.132`

The new code in this PR uses `euiFlyoutBody__overflowContent`, which restores the Timeline's original padding:

![timeline-paddng-after-chrome-default-theme](https://user-images.githubusercontent.com/4459398/76060436-8b6cdd00-5f3e-11ea-80d6-9ff0e74722c3.png)

![timeline-padding-after-chrome-dark-theme](https://user-images.githubusercontent.com/4459398/76060601-dedf2b00-5f3e-11ea-8a46-1008d7defe09.png)

### After Firefox `73.0.1`

![timeline-padding-after-firefox](https://user-images.githubusercontent.com/4459398/76060692-18b03180-5f3f-11ea-8277-31b6f9dbf211.png)

### After Safari `13.0.5`

![timeline-padding-after-safari](https://user-images.githubusercontent.com/4459398/76060744-38475a00-5f3f-11ea-9b04-cdd45fa41702.png)
This commit is contained in:
Andrew Goldstein 2020-03-06 08:45:08 -07:00 committed by GitHub
parent 07757eae84
commit 060b9fb10e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
View file

@ -49,7 +49,7 @@ const EuiFlyoutContainer = styled.div<{ headerHeight: number }>`
.timeline-flyout-body {
overflow-y: hidden;
padding: 0;
.euiFlyoutBody__overflow {
.euiFlyoutBody__overflowContent {
padding: 0;
}
}