[Security Solution] Full Screen of Rule Preview breaking the UI under Rule Creation form (#146687)

## Summary

These changes fix broken fullscreen table that displays the rule preview
results.

Fullscreen table before fix:

<img width="1879" alt="Screenshot 2022-11-30 at 14 46 00"
src="https://user-images.githubusercontent.com/2700761/204812399-52138490-a42a-4ea2-bd00-04680375580a.png">

Fullscreen table after fix:

<img width="1881" alt="Screenshot 2022-11-30 at 14 45 20"
src="https://user-images.githubusercontent.com/2700761/204812419-5b528ae5-02e4-4808-adcc-14ede7cec56b.png">

Ticket: #145954

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Ievgen Sorokopud 2022-11-30 18:57:30 +01:00 committed by GitHub
parent ebfc715105
commit d9b690f97a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -24,6 +24,10 @@ import type { AboutStepRule, DefineStepRule, ScheduleStepRule } from '../types';
import * as i18n from './translations';
const StyledEuiFlyout = styled(EuiFlyout)`
clip-path: none;
`;
const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
overflow-y: hidden;
flex: 1;
@ -51,7 +55,7 @@ const PreviewFlyoutComponent: React.FC<PreviewFlyoutProps> = ({
onClose,
}) => {
return (
<EuiFlyout type="push" size="550px" ownFocus={false} onClose={onClose}>
<StyledEuiFlyout type="push" size="550px" ownFocus={false} onClose={onClose}>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>{i18n.RULE_PREVIEW_TITLE}</h2>
@ -73,7 +77,7 @@ const PreviewFlyoutComponent: React.FC<PreviewFlyoutProps> = ({
<EuiFlyoutFooter>
<EuiButton onClick={onClose}>{i18n.CANCEL_BUTTON_LABEL}</EuiButton>
</EuiFlyoutFooter>
</EuiFlyout>
</StyledEuiFlyout>
);
};