From d51c966a1e5bf78109b373114323b513348295e7 Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
Date: Tue, 13 Apr 2021 17:13:59 -0600
Subject: [PATCH] ## [Security Solution] Fixes `Exit full screen` and `Copy to
 cliboard` styling issues (#96676) (#97047)

## [Security Solution] Fixes `Exit full screen` and `Copy to clipboard` styling issues

Note: This PR is `release_note:skip` because the styling issues below do not effect any previous release.

- Fixes issue https://github.com/elastic/kibana/issues/96209 where the `Exit full screen` button in Timeline's `Pinned` tab is rendered adjacent to, instead of above, the table:

### Before: Exit Full Screen (`Pinned` tab)

![exit-full-screen-before](https://user-images.githubusercontent.com/4459398/114104665-89372980-9888-11eb-9158-ffa9c5a5ce17.png)

_Before: The `Exit full screen` button on Timeline's `Pinned` tab_

### After: Exit Full Screen (`Pinned` tab)

![exit-full-screen-after](https://user-images.githubusercontent.com/4459398/114106055-3743d300-988b-11eb-9c4d-c08679702d05.png)

_After: The `Exit full screen` button on Timeline's `Pinned` tab_

- Fixes an issue where the `Copy to clipboard` hover menu action was not aligned with the other hover menu actions:

### Before: Copy to clipboard hover action

![copy-to-clipboard-before](https://user-images.githubusercontent.com/4459398/114106138-5c384600-988b-11eb-942e-ae4e09848b09.png)

_Before: The `Copy to clipboard` hover action was not aligned_

### After: Copy to clipboard hover action

![copy-to-clipboard-after](https://user-images.githubusercontent.com/4459398/114106236-8db11180-988b-11eb-85ae-476ac6d1df4e.png)

_After: The `Copy to clipboard` hover action is aligned_

### Desk Testing

Desk tested in:

- Chrome `89.0.4389.114`
- Firefox `87.0`
- Safari `14.0.3`
---
 .../lib/clipboard/with_copy_to_clipboard.tsx  | 17 ++--------------
 .../timeline/pinned_tab_content/index.tsx     | 20 +++++++++----------
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/lib/clipboard/with_copy_to_clipboard.tsx b/x-pack/plugins/security_solution/public/common/lib/clipboard/with_copy_to_clipboard.tsx
index bec1b296d4854..1baa57166de3f 100644
--- a/x-pack/plugins/security_solution/public/common/lib/clipboard/with_copy_to_clipboard.tsx
+++ b/x-pack/plugins/security_solution/public/common/lib/clipboard/with_copy_to_clipboard.tsx
@@ -7,22 +7,12 @@
 
 import { EuiToolTip } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
 
 import { TooltipWithKeyboardShortcut } from '../../components/accessibility/tooltip_with_keyboard_shortcut';
 import * as i18n from '../../components/drag_and_drop/translations';
 
 import { Clipboard } from './clipboard';
 
-const WithCopyToClipboardContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  user-select: text;
-`;
-
-WithCopyToClipboardContainer.displayName = 'WithCopyToClipboardContainer';
-
 /**
  * Renders `children` with an adjacent icon that when clicked, copies `text` to
  * the clipboard and displays a confirmation toast
@@ -31,7 +21,7 @@ export const WithCopyToClipboard = React.memo<{
   keyboardShortcut?: string;
   text: string;
   titleSummary?: string;
-}>(({ keyboardShortcut = '', text, titleSummary, children }) => (
+}>(({ keyboardShortcut = '', text, titleSummary }) => (
   <EuiToolTip
     content={
       <TooltipWithKeyboardShortcut
@@ -42,10 +32,7 @@ export const WithCopyToClipboard = React.memo<{
       />
     }
   >
-    <WithCopyToClipboardContainer>
-      <>{children}</>
-      <Clipboard content={text} titleSummary={titleSummary} toastLifeTimeMs={800} />
-    </WithCopyToClipboardContainer>
+    <Clipboard content={text} titleSummary={titleSummary} toastLifeTimeMs={800} />
   </EuiToolTip>
 ));
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
index dfc14747dacf3..a3fd991da5782 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
@@ -62,11 +62,7 @@ const StyledEuiFlyoutFooter = styled(EuiFlyoutFooter)`
   }
 `;
 
-const ExitFullScreenFlexItem = styled(EuiFlexItem)`
-  &.euiFlexItem {
-    ${({ theme }) => `margin: ${theme.eui.euiSizeS} 0 0 ${theme.eui.euiSizeS};`}
-  }
-
+const ExitFullScreenContainer = styled.div`
   width: 180px;
 `;
 
@@ -205,13 +201,15 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
   return (
     <>
       <FullWidthFlexGroup data-test-subj={`${TimelineTabs.pinned}-tab`}>
-        {timelineFullScreen && setTimelineFullScreen != null && (
-          <ExitFullScreenFlexItem grow={false}>
-            <ExitFullScreen fullScreen={timelineFullScreen} setFullScreen={setTimelineFullScreen} />
-          </ExitFullScreenFlexItem>
-        )}
-
         <ScrollableFlexItem grow={2}>
+          {timelineFullScreen && setTimelineFullScreen != null && (
+            <ExitFullScreenContainer>
+              <ExitFullScreen
+                fullScreen={timelineFullScreen}
+                setFullScreen={setTimelineFullScreen}
+              />
+            </ExitFullScreenContainer>
+          )}
           <EventDetailsWidthProvider>
             <StyledEuiFlyoutBody
               data-test-subj={`${TimelineTabs.pinned}-tab-flyout-body`}