From a45925a3506bdc4afe6e7e81491418d7dc82e49a Mon Sep 17 00:00:00 2001
From: Christos Nasikas <christos.nasikas@elastic.co>
Date: Mon, 12 Apr 2021 17:57:23 +0300
Subject: [PATCH] Fix flyout

---
 .../public/cases/components/create/flyout.tsx | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx b/x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx
index e7bb0b25f391fd..8f76ee8f851738 100644
--- a/x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx
@@ -33,11 +33,25 @@ const StyledFlyout = styled(EuiFlyout)`
     z-index: ${theme.eui.euiZModal};
   `}
 `;
-
 // Adding bottom padding because timeline's
 // bottom bar gonna hide the submit button.
+const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
+  ${({ theme }) => `
+    && .euiFlyoutBody__overflow {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    && .euiFlyoutBody__overflowContent {
+      display: block;
+      padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 70px;
+      height: auto;
+    }
+  `}
+`;
+
 const FormWrapper = styled.div`
-  padding-bottom: 50px;
+  width: 100%;
 `;
 
 const CreateCaseFlyoutComponent: React.FC<CreateCaseModalProps> = ({
@@ -52,7 +66,7 @@ const CreateCaseFlyoutComponent: React.FC<CreateCaseModalProps> = ({
           <h2>{i18n.CREATE_TITLE}</h2>
         </EuiTitle>
       </EuiFlyoutHeader>
-      <EuiFlyoutBody>
+      <StyledEuiFlyoutBody>
         <FormWrapper>
           <FormContext onSuccess={onSuccess} afterCaseCreated={afterCaseCreated}>
             <CreateCaseForm withSteps={false} />
@@ -61,7 +75,7 @@ const CreateCaseFlyoutComponent: React.FC<CreateCaseModalProps> = ({
             </Container>
           </FormContext>
         </FormWrapper>
-      </EuiFlyoutBody>
+      </StyledEuiFlyoutBody>
     </StyledFlyout>
   );
 };