[Security Solution] fix weird page height scroll due to timeline bott…

…om bar (#170362)
elastic · Nov 6, 2023 · f9ac6e9 · f9ac6e9
1 parent 4189b26
commit f9ac6e9
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 24 deletions.
diff --git a/x-pack/plugins/security_solution/public/app/home/template_wrapper/bottom_bar/index.tsx b/x-pack/plugins/security_solution/public/app/home/template_wrapper/bottom_bar/index.tsx
@@ -6,14 +6,11 @@
  */
 
 import React from 'react';
-import type { EuiBottomBarProps } from '@elastic/eui';
 import { useKibana } from '../../../../common/lib/kibana/kibana_react';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { Flyout } from '../../../../timelines/components/flyout';
 import { useResolveRedirect } from '../../../../common/hooks/use_resolve_redirect';
 
-export const BOTTOM_BAR_CLASSNAME = 'timeline-bottom-bar';
-
 // eslint-disable-next-line react/display-name
 export const SecuritySolutionBottomBar = React.memo(() => {
   useResolveRedirect();
@@ -22,10 +19,3 @@ export const SecuritySolutionBottomBar = React.memo(() => {
 
   return <Flyout timelineId={TimelineId.active} onAppLeave={onAppLeave} />;
 });
-
-export const SecuritySolutionBottomBarProps: EuiBottomBarProps & {
-  restrictWidth?: boolean | number | string;
-} = {
-  className: BOTTOM_BAR_CLASSNAME,
-  'data-test-subj': 'timeline-bottom-bar-container',
-};
diff --git a/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx b/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx
@@ -17,11 +17,7 @@ import { TimelineId } from '../../../../common/types/timeline';
 import { getTimelineShowStatusByIdSelector } from '../../../timelines/components/flyout/selectors';
 import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
 import { GlobalKQLHeader } from './global_kql_header';
-import {
-  BOTTOM_BAR_CLASSNAME,
-  SecuritySolutionBottomBar,
-  SecuritySolutionBottomBarProps,
-} from './bottom_bar';
+import { SecuritySolutionBottomBar } from './bottom_bar';
 import { useShowTimeline } from '../../../common/utils/timeline/use_show_timeline';
 
 /**
@@ -39,14 +35,6 @@ const StyledKibanaPageTemplate = styled(KibanaPageTemplate)<
     background-color: ${({ theme }) => theme.colors.emptyShade};
   }
 
-  .${BOTTOM_BAR_CLASSNAME} {
-    animation: 'none !important'; // disable the default bottom bar slide animation
-    background: ${({ theme }) => theme.colors.emptyShade}; // Override bottom bar black background
-    color: inherit; // Necessary to override the bottom bar 'white text'
-    transform: ${(
-      { $isShowingTimelineOverlay } // Since the bottom bar wraps the whole overlay now, need to override any transforms when it is open
-    ) => ($isShowingTimelineOverlay ? 'none' : 'translateY(calc(100% - 50px))')};
-
     .${IS_DRAGGING_CLASS_NAME} & {
       // When a drag is in process the bottom flyout should slide up to allow a drop
       transform: none;
@@ -95,7 +83,7 @@ export const SecuritySolutionTemplateWrapper: React.FC<Omit<KibanaPageTemplatePr
             {children}
           </KibanaPageTemplate.Section>
           {isTimelineBottomBarVisible && (
-            <KibanaPageTemplate.BottomBar {...SecuritySolutionBottomBarProps}>
+            <KibanaPageTemplate.BottomBar data-test-subj="timeline-bottom-bar-container">
               <EuiThemeProvider colorMode={globalColorMode}>
                 <SecuritySolutionBottomBar />
               </EuiThemeProvider>