From 2d9e5c2339f1a3478c61b65fe7abfd83b4314841 Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
Date: Tue, 21 Jul 2020 15:36:30 -0600
Subject: [PATCH] [Security Solution] Full screen Timeline CSS fixes (#72559)
 (#72727)

## [Security Solution] Full screen Timeline CSS fixes

Fixes CSS issues related to the [Full screen timeline, Collapse event](https://github.com/elastic/kibana/pull/71786) feature:

- Sometimes, Timeline's left padding is missing in Full screen mode
- The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode
- The Timeline flyout button is not opaque when the alerts table is in Full screen mode

### Sometimes, Timeline's left padding is missing in Full screen mode

To reproduce:

1) Drag anything to the Timeline
2) Click the `Full screen` button

**Expected result**
- [x] The timeline has left padding in full screen mode

**Actual result**
- [x] Sometimes, the left padding of the Timeline is missing, per the screenshot below:

![timeline-full-screen-before](https://user-images.githubusercontent.com/4459398/87998223-8acf8000-cab4-11ea-91a1-6b5644856b44.png)

### Fix: screenshot

![timeline-full-screen-after](https://user-images.githubusercontent.com/4459398/87998363-e3068200-cab4-11ea-8484-41d87ba4c97e.png)

### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode

1) Create a new timeline with the following KQL query: `agent.type : endpoint`
2) Click the `Analyze event` button on any enabled event to view Resolver

**Expected result**
- [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines

**Actual result**
- [x] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:

![attach-to-case-before](https://user-images.githubusercontent.com/4459398/87998636-b9018f80-cab5-11ea-87e8-a54355386519.png)

### Fix: screenshot

![attach-to-case-after](https://user-images.githubusercontent.com/4459398/87998553-82c41000-cab5-11ea-9e33-fcffce11e4b4.png)

### The Timeline flyout button is not opaque when the alerts table is in Full screen mode

To reproduce:

1) Navigate to Security > Detections
2) Click on the `Full screen` button

**Expected result**
- [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode

**Actual result**
- [x] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:

![flyout-button-before](https://user-images.githubusercontent.com/4459398/87998761-0d0c7400-cab6-11ea-9cd3-0c091e0291c9.png)

## Fix: screenshot (light theme)

![flyout-button-after-light](https://user-images.githubusercontent.com/4459398/87998784-231a3480-cab6-11ea-8fc9-17c28cf25202.png)

## Fix: screenshot (dark theme)

![flyout-button-after-dark](https://user-images.githubusercontent.com/4459398/87998824-45ac4d80-cab6-11ea-96ef-6242b8494f84.png)

### Desk testing

Desk tested in :
- Chrome `84.0.4147.89`
- Firefox `78.0.2`
- Safari `13.1.2`
---
 .../public/timelines/components/flyout/button/index.tsx   | 1 +
 .../public/timelines/components/flyout/pane/index.tsx     | 8 +++++---
 .../public/timelines/components/graph_overlay/index.tsx   | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx
index 5896a02b82023..c0a59fd07e348 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx
@@ -39,6 +39,7 @@ const Container = styled.div`
   }
 
   .${FLYOUT_BUTTON_CLASS_NAME} {
+    background: ${({ theme }) => rgba(theme.eui.euiPageBackgroundColor, 1)};
     border-radius: 4px 4px 0 0;
     box-shadow: none;
     height: 46px;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx
index f41d318ba9587..3f842bcc2eb68 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx
@@ -44,6 +44,8 @@ const StyledResizable = styled(Resizable)`
 
 const RESIZABLE_ENABLE = { left: true };
 
+const RESIZABLE_DISABLED = { left: false };
+
 const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
   children,
   onClose,
@@ -98,10 +100,10 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
         size="l"
       >
         <StyledResizable
-          enable={RESIZABLE_ENABLE}
+          enable={timelineFullScreen ? RESIZABLE_DISABLED : RESIZABLE_ENABLE}
           defaultSize={resizableDefaultSize}
-          minWidth={timelineFullScreen ? '100vw' : minWidthPixels}
-          maxWidth={timelineFullScreen ? '100vw' : `${maxWidthPercent}vw`}
+          minWidth={timelineFullScreen ? 'calc(100vw - 8px)' : minWidthPixels}
+          maxWidth={timelineFullScreen ? 'calc(100vw - 8px)' : `${maxWidthPercent}vw`}
           handleComponent={resizableHandleComponent}
           onResizeStop={onResizeStop}
         >
diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx
index 9f20c7f6c1571..54b30aca44a1f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx
@@ -181,7 +181,7 @@ const GraphOverlayComponent = ({
         </EuiFlexItem>
         {timelineId === TimelineId.active && timelineType === TimelineType.default && (
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="none">
+            <EuiFlexGroup alignItems="center" gutterSize="none">
               <EuiFlexItem grow={false}>
                 <NewCase
                   compact={true}