From 060b9fb10ead23bb9bf588590e72b8d2b1a77240 Mon Sep 17 00:00:00 2001 From: Andrew Goldstein Date: Fri, 6 Mar 2020 08:45:08 -0700 Subject: [PATCH] [SIEM] Update Timeline to use the latest euiFlyoutBody style (#59524) ## [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) --- .../legacy/plugins/siem/public/components/flyout/pane/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx index fb977417ffbb..38ec4a4b6f1f 100644 --- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx @@ -49,7 +49,7 @@ const EuiFlyoutContainer = styled.div<{ headerHeight: number }>` .timeline-flyout-body { overflow-y: hidden; padding: 0; - .euiFlyoutBody__overflow { + .euiFlyoutBody__overflowContent { padding: 0; } }