[8.6] [Security Solution] Full Screen of Rule Preview breaking the UI…

… under Rule Creation form (#146687) (#146736)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Security Solution] Full Screen of Rule Preview breaking the UI under
Rule Creation form
(#146687)](#146687)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Ievgen
Sorokopud","email":"ievgen.sorokopud@elastic.co"},"sourceCommit":{"committedDate":"2022-11-30T17:57:30Z","message":"[Security
Solution] Full Screen of Rule Preview breaking the UI under Rule
Creation form (#146687)\n\n## Summary\r\n\r\nThese changes fix broken
fullscreen table that displays the rule
preview\r\nresults.\r\n\r\nFullscreen table before fix:\r\n\r\n<img
width=\"1879\" alt=\"Screenshot 2022-11-30 at 14 46
00\"\r\nsrc=\"https://user-images.githubusercontent.com/2700761/204812399-52138490-a42a-4ea2-bd00-04680375580a.png\">\r\n\r\nFullscreen
table after fix:\r\n\r\n<img width=\"1881\" alt=\"Screenshot 2022-11-30
at 14 45
20\"\r\nsrc=\"https://user-images.githubusercontent.com/2700761/204812419-5b528ae5-02e4-4808-adcc-14ede7cec56b.png\">\r\n\r\nTicket:
#145954\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"d9b690f97a450fa29ea602e8181861045242c35f","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection
Alerts","backport:prev-minor","ci:cloud-deploy","v8.7.0"],"number":146687,"url":"#146687
Solution] Full Screen of Rule Preview breaking the UI under Rule
Creation form (#146687)\n\n## Summary\r\n\r\nThese changes fix broken
fullscreen table that displays the rule
preview\r\nresults.\r\n\r\nFullscreen table before fix:\r\n\r\n<img
width=\"1879\" alt=\"Screenshot 2022-11-30 at 14 46
00\"\r\nsrc=\"https://user-images.githubusercontent.com/2700761/204812399-52138490-a42a-4ea2-bd00-04680375580a.png\">\r\n\r\nFullscreen
table after fix:\r\n\r\n<img width=\"1881\" alt=\"Screenshot 2022-11-30
at 14 45
20\"\r\nsrc=\"https://user-images.githubusercontent.com/2700761/204812419-5b528ae5-02e4-4808-adcc-14ede7cec56b.png\">\r\n\r\nTicket:
#145954\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"d9b690f97a450fa29ea602e8181861045242c35f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"#146687
Solution] Full Screen of Rule Preview breaking the UI under Rule
Creation form (#146687)\n\n## Summary\r\n\r\nThese changes fix broken
fullscreen table that displays the rule
preview\r\nresults.\r\n\r\nFullscreen table before fix:\r\n\r\n<img
width=\"1879\" alt=\"Screenshot 2022-11-30 at 14 46
00\"\r\nsrc=\"https://user-images.githubusercontent.com/2700761/204812399-52138490-a42a-4ea2-bd00-04680375580a.png\">\r\n\r\nFullscreen
table after fix:\r\n\r\n<img width=\"1881\" alt=\"Screenshot 2022-11-30
at 14 45
20\"\r\nsrc=\"https://user-images.githubusercontent.com/2700761/204812419-5b528ae5-02e4-4808-adcc-14ede7cec56b.png\">\r\n\r\nTicket:
#145954\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"d9b690f97a450fa29ea602e8181861045242c35f"}}]}]
BACKPORT-->

Co-authored-by: Ievgen Sorokopud <ievgen.sorokopud@elastic.co>

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/preview/index.tsx

@@ -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>
   );
 };