From 90a8b32393b40774ad8fa3de924df2da85ffae5a Mon Sep 17 00:00:00 2001
From: Philippe Oberti <philippe.oberti@elastic.co>
Date: Thu, 28 Sep 2023 00:01:28 +0200
Subject: [PATCH] [Security Solution] expandable flyout - fix footer not always
 visible (#167074)

---
 .../src/components/left_section.tsx           |  6 +++---
 .../src/components/right_section.tsx          |  6 +++---
 .../public/flyout/left/content.tsx            | 13 +++++++++++--
 .../public/flyout/left/header.tsx             | 19 ++++++++++---------
 .../public/flyout/left/index.tsx              | 11 ++---------
 .../public/flyout/right/header.tsx            |  7 +------
 6 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/packages/kbn-expandable-flyout/src/components/left_section.tsx b/packages/kbn-expandable-flyout/src/components/left_section.tsx
index 25958fbb332b..d388923c01d6 100644
--- a/packages/kbn-expandable-flyout/src/components/left_section.tsx
+++ b/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>
   );
 };
diff --git a/packages/kbn-expandable-flyout/src/components/right_section.tsx b/packages/kbn-expandable-flyout/src/components/right_section.tsx
index b6020a54bc39..7857c2b4fba4 100644
--- a/packages/kbn-expandable-flyout/src/components/right_section.tsx
+++ b/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>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/flyout/left/content.tsx b/x-pack/plugins/security_solution/public/flyout/left/content.tsx
index 27fb60800d40..b16d1dd3adfe 100644
--- a/x-pack/plugins/security_solution/public/flyout/left/content.tsx
+++ b/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';
diff --git a/x-pack/plugins/security_solution/public/flyout/left/header.tsx b/x-pack/plugins/security_solution/public/flyout/left/header.tsx
index df11d7bf36db..50c53cd5dcd8 100644
--- a/x-pack/plugins/security_solution/public/flyout/left/header.tsx
+++ b/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>
diff --git a/x-pack/plugins/security_solution/public/flyout/left/index.tsx b/x-pack/plugins/security_solution/public/flyout/left/index.tsx
index 73138b7ecb26..a6e4e865adfa 100644
--- a/x-pack/plugins/security_solution/public/flyout/left/index.tsx
+++ b/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>
+    </>
   );
 });
 
diff --git a/x-pack/plugins/security_solution/public/flyout/right/header.tsx b/x-pack/plugins/security_solution/public/flyout/right/header.tsx
index 67425b6eb356..80d809af0711 100644
--- a/x-pack/plugins/security_solution/public/flyout/right/header.tsx
+++ b/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