## [Security Solution] Fixes the Customize Event Renderers modal by r…

…emoving the EuiOverlayMask

Fixes [this issue](#92798), introduced when [the EUI modal implementation changed](elastic/eui#4480), such that it's no longer necessary to wrap modals in an `EuiOverlayMask`. The mask is now built-in to `EuiModal`.

The change above became effective throughout Kibana when it was upgraded to use a newer version of EUI via [this commit on Feb 16](8126488#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519).

This PR resolves the issue by removing the `EuiOverlayMask` around the `Customize Event Renderers modal`, shown in the `After` screenshot below:

### Before

![before](https://user-images.githubusercontent.com/59917825/109154007-b2e23880-7793-11eb-83bb-4774df77c5d6.png)

### After

![after](https://user-images.githubusercontent.com/4459398/109561954-0c4fad80-7a9b-11eb-9283-51d50ec8ea26.png)

### Desk testing

Desk-tested on a 16" 2019 MBP, and on the desktop with the following browser versions:

- Chrome `88.0.4324.192`
- Firefox `86.0`
- Safari `14.0.3`

x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx

@@ -10,7 +10,6 @@ import {
   EuiButtonIcon,
   EuiText,
   EuiToolTip,
-  EuiOverlayMask,
   EuiModal,
   EuiModalHeader,
   EuiModalHeaderTitle,
@@ -33,12 +32,12 @@ import { RowRenderersBrowser } from './row_renderers_browser';
 import * as i18n from './translations';
 
 const StyledEuiModal = styled(EuiModal)`
-  margin: 0 auto;
+${({ theme }) => `margin-top: ${theme.eui.euiSizeXXL};`}
   max-width: 95vw;
-  min-height: 95vh;
+  min-height: 90vh;
 
   > .euiModal__flex {
-    max-height: 95vh;
+    max-height: 90vh;
   }
 `;
 
@@ -65,14 +64,6 @@ const StyledEuiModalBody = styled(EuiModalBody)`
   }
 `;
 
-const StyledEuiOverlayMask = styled(EuiOverlayMask)`
-  z-index: 8001;
-  padding-bottom: 0;
-
-  > div {
-    width: 100%;
-  }
-`;
 
 interface StatefulRowRenderersBrowserProps {
   timelineId: string;
@@ -125,7 +116,6 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
       </EuiToolTip>
 
       {show && (
-        <StyledEuiOverlayMask>
           <StyledEuiModal onClose={hideFieldBrowser}>
             <EuiModalHeader>
               <EuiFlexGroup
@@ -172,7 +162,6 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
               />
             </StyledEuiModalBody>
           </StyledEuiModal>
-        </StyledEuiOverlayMask>
       )}
     </>
   );