Fix broken alerts table in fullscreen mode

elastic · Sep 12, 2022 · 615423b · 615423b
1 parent ae15c99
commit 615423b
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/...lugins/security_solution/public/detections/pages/detection_engine/rules/preview/index.tsx b/...lugins/security_solution/public/detections/pages/detection_engine/rules/preview/index.tsx
@@ -16,13 +16,24 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
+import styled from 'styled-components';
 
 import type { List } from '@kbn/securitysolution-io-ts-list-types';
 import { RulePreview } from '../../../../components/rules/rule_preview';
 import type { AboutStepRule, DefineStepRule, ScheduleStepRule } from '../types';
 
 import * as i18n from './translations';
 
+const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
+  overflow-y: hidden;
+  flex: 1;
+
+  .euiFlyoutBody__overflow {
+    overflow: hidden;
+    mask-image: none;
+  }
+`;
+
 interface PreviewFlyoutProps {
   isDisabled: boolean;
   defineStepData: DefineStepRule;
@@ -51,15 +62,15 @@ const PreviewFlyoutComponent: React.FC<PreviewFlyoutProps> = ({
           <p>{i18n.RULE_PREVIEW_DESCRIPTION}</p>
         </EuiText>
       </EuiFlyoutHeader>
-      <EuiFlyoutBody>
+      <StyledEuiFlyoutBody>
         <RulePreview
           isDisabled={isDisabled}
           defineRuleData={defineStepData}
           aboutRuleData={aboutStepData}
           scheduleRuleData={scheduleStepData}
           exceptionsList={exceptionsList}
         />
-      </EuiFlyoutBody>
+      </StyledEuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiButton onClick={onClose}>{i18n.CANCEL_BUTTON_LABEL}</EuiButton>
       </EuiFlyoutFooter>