[Security Solution][Cases] Fix create case flyout on timeline. (#96798)

elastic · Apr 13, 2021 · d7a09e4 · d7a09e4
1 parent 0da5578
commit d7a09e4
Showing 1 changed file with 18 additions and 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
@@ -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>
   );
 };