[Security Solution] expandable flyout - fix footer not always visible (#167074)

packages/kbn-expandable-flyout/src/components/left_section.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { LEFT_SECTION } from './test_ids';
 
@@ -26,12 +26,12 @@ interface LeftSectionProps {
  */
 export const LeftSection: React.FC<LeftSectionProps> = ({ component, width }: LeftSectionProps) => {
   const style = useMemo<React.CSSProperties>(
-    () => ({ height: '100%', width: `${width * 100}%`, overflowY: 'scroll' }),
+    () => ({ height: '100%', width: `${width * 100}%` }),
     [width]
   );
   return (
     <EuiFlexItem grow data-test-subj={LEFT_SECTION} style={style}>
-      <EuiFlexGroup direction="column">{component}</EuiFlexGroup>
+      {component}
     </EuiFlexItem>
   );
 };

packages/kbn-expandable-flyout/src/components/right_section.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { RIGHT_SECTION } from './test_ids';
 
@@ -29,13 +29,13 @@ export const RightSection: React.FC<RightSectionProps> = ({
   width,
 }: RightSectionProps) => {
   const style = useMemo<React.CSSProperties>(
-    () => ({ height: '100%', width: `${width * 100}%`, overflowY: 'scroll' }),
+    () => ({ height: '100%', width: `${width * 100}%` }),
     [width]
   );
 
   return (
     <EuiFlexItem grow={false} style={style} data-test-subj={RIGHT_SECTION}>
-      <EuiFlexGroup direction="column">{component}</EuiFlexGroup>
+      {component}
     </EuiFlexItem>
   );
 };

x-pack/plugins/security_solution/public/flyout/left/content.tsx

@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import { EuiFlyoutBody } from '@elastic/eui';
+import { EuiFlyoutBody, useEuiBackgroundColor } from '@elastic/eui';
 import type { VFC } from 'react';
 import React, { useMemo } from 'react';
+import { css } from '@emotion/react';
 import type { LeftPanelPaths } from '.';
 import { tabs } from './tabs';
 
@@ -27,7 +28,15 @@ export const PanelContent: VFC<PanelContentProps> = ({ selectedTabId }) => {
     return tabs.filter((tab) => tab.visible).find((tab) => tab.id === selectedTabId)?.content;
   }, [selectedTabId]);
 
-  return <EuiFlyoutBody>{selectedTabContent}</EuiFlyoutBody>;
+  return (
+    <EuiFlyoutBody
+      css={css`
+        background-color: ${useEuiBackgroundColor('subdued')};
+      `}
+    >
+      {selectedTabContent}
+    </EuiFlyoutBody>
+  );
 };
 
 PanelContent.displayName = 'PanelContent';

x-pack/plugins/security_solution/public/flyout/left/header.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlyoutHeader, EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiFlyoutHeader, EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui';
 import type { VFC } from 'react';
 import React, { memo } from 'react';
 import { css } from '@emotion/react';
@@ -44,14 +44,15 @@ export const PanelHeader: VFC<PanelHeaderProps> = memo(({ selectedTabId, setSele
     ));
 
   return (
-    <EuiFlyoutHeader hasBorder>
-      <EuiTabs
-        size="l"
-        expand
-        css={css`
-          margin-bottom: -25px;
-        `}
-      >
+    <EuiFlyoutHeader
+      hasBorder
+      css={css`
+        background-color: ${useEuiBackgroundColor('subdued')};
+        padding-bottom: 0 !important;
+        border-block-end: none !important;
+      `}
+    >
+      <EuiTabs size="l" expand>
         {renderTabs}
       </EuiTabs>
     </EuiFlyoutHeader>

x-pack/plugins/security_solution/public/flyout/left/index.tsx

@@ -7,8 +7,6 @@
 
 import type { FC } from 'react';
 import React, { memo, useMemo } from 'react';
-import { useEuiBackgroundColor } from '@elastic/eui';
-import { css } from '@emotion/react';
 import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout';
 import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
 import { PanelHeader } from './header';
@@ -60,15 +58,10 @@ export const LeftPanel: FC<Partial<LeftPanelProps>> = memo(({ path }) => {
   };
 
   return (
-    <div
-      css={css`
-        height: 100%;
-        background: ${useEuiBackgroundColor('subdued')};
-      `}
-    >
+    <>
       <PanelHeader selectedTabId={selectedTabId} setSelectedTabId={setSelectedTabId} />
       <PanelContent selectedTabId={selectedTabId} />
-    </div>
+    </>
   );
 });
 

x-pack/plugins/security_solution/public/flyout/right/header.tsx

@@ -49,12 +49,7 @@ export const PanelHeader: VFC<PanelHeaderProps> = memo(
     ));
 
     return (
-      <EuiFlyoutHeader
-        hasBorder
-        css={css`
-          margin-bottom: ${flyoutIsExpandable ? '-24px' : '0px'};
-        `}
-      >
+      <EuiFlyoutHeader hasBorder>
         {flyoutIsExpandable && (
           <div
             // moving the buttons up in the header