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

…ving the EuiOverlayMask (#93150)

* ## [Security Solution] Fixes the Customize Event Renderers modal by removing 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`

* - force precommit git hooks to run

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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,15 +64,6 @@ const StyledEuiModalBody = styled(EuiModalBody)`
  }
 `;
 
-const StyledEuiOverlayMask = styled(EuiOverlayMask)`
- z-index: 8001;
- padding-bottom: 0;
-
- > div {
- width: 100%;
- }
-`;
-
 interface StatefulRowRenderersBrowserProps {
  timelineId: string;
 }
@@ -125,54 +115,47 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
  </EuiToolTip>
 
  {show && (
- <StyledEuiOverlayMask>
- <StyledEuiModal onClose={hideFieldBrowser}>
- <EuiModalHeader>
- <EuiFlexGroup
- alignItems="center"
- justifyContent="spaceBetween"
- direction="row"
- gutterSize="none"
- >
- <EuiFlexItem grow={false}>
- <EuiModalHeaderTitle>{i18n.CUSTOMIZE_EVENT_RENDERERS_TITLE}</EuiModalHeaderTitle>
- <EuiText size="s">{i18n.CUSTOMIZE_EVENT_RENDERERS_DESCRIPTION}</EuiText>
- </EuiFlexItem>
- <EuiFlexItem grow={false}>
- <EuiFlexGroup>
- <EuiFlexItem grow={false}>
- <EuiButtonEmpty
- size="s"
- data-test-subj="disable-all"
- onClick={handleDisableAll}
- >
- {i18n.DISABLE_ALL}
- </EuiButtonEmpty>
- </EuiFlexItem>
-
- <EuiFlexItem grow={false}>
- <EuiButton
- fill
- size="s"
- data-test-subj="enable-all"
- onClick={handleEnableAll}
- >
- {i18n.ENABLE_ALL}
- </EuiButton>
- </EuiFlexItem>
- </EuiFlexGroup>
- </EuiFlexItem>
- </EuiFlexGroup>
- </EuiModalHeader>
-
- <StyledEuiModalBody>
- <RowRenderersBrowser
- excludedRowRendererIds={excludedRowRendererIds}
- setExcludedRowRendererIds={setExcludedRowRendererIds}
- />
- </StyledEuiModalBody>
- </StyledEuiModal>
- </StyledEuiOverlayMask>
+ <StyledEuiModal onClose={hideFieldBrowser}>
+ <EuiModalHeader>
+ <EuiFlexGroup
+ alignItems="center"
+ justifyContent="spaceBetween"
+ direction="row"
+ gutterSize="none"
+ >
+ <EuiFlexItem grow={false}>
+ <EuiModalHeaderTitle>{i18n.CUSTOMIZE_EVENT_RENDERERS_TITLE}</EuiModalHeaderTitle>
+ <EuiText size="s">{i18n.CUSTOMIZE_EVENT_RENDERERS_DESCRIPTION}</EuiText>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiFlexGroup>
+ <EuiFlexItem grow={false}>
+ <EuiButtonEmpty
+ size="s"
+ data-test-subj="disable-all"
+ onClick={handleDisableAll}
+ >
+ {i18n.DISABLE_ALL}
+ </EuiButtonEmpty>
+ </EuiFlexItem>
+
+ <EuiFlexItem grow={false}>
+ <EuiButton fill size="s" data-test-subj="enable-all" onClick={handleEnableAll}>
+ {i18n.ENABLE_ALL}
+ </EuiButton>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiModalHeader>
+
+ <StyledEuiModalBody>
+ <RowRenderersBrowser
+ excludedRowRendererIds={excludedRowRendererIds}
+ setExcludedRowRendererIds={setExcludedRowRendererIds}
+ />
+ </StyledEuiModalBody>
+ </StyledEuiModal>
  )}
  </>
  );