From 5b352bfc3f308ce5e94019e99c421b8548df3a54 Mon Sep 17 00:00:00 2001
From: Cristina Amico <criamico@users.noreply.github.com>
Date: Mon, 13 Mar 2023 17:00:33 +0100
Subject: [PATCH] [Fleet] Fix missing scrolling bar in categories column
 (#153181)

Closes https://github.com/elastic/kibana/issues/149378

## Summary
Fixing missing scrolling bar in Integrations `categories` left column. I
replaced the `sticky` css property with the class `kbnStickyMenu`
defined
[here](https://github.com/elastic/kibana/blob/3c7bf5840539fad8e45e6d490bb7a82b955ba9f5/src/core/public/styles/rendering/_base.scss#L47-L51).
This class is applied above a certain breakpoint.

### Large viewport
The categories column is sticky:

https://user-images.githubusercontent.com/16084106/224733525-362d6b0c-321a-476d-ae5f-caad45ef3fcc.mov

### Smaller viewport
The categories column now has a scrolling bar:

https://user-images.githubusercontent.com/16084106/224733690-b310fb78-1ee3-45a7-bc45-dd29ffdc280b.mov
(cherry picked from commit bb3f91715e2780238b02e69e80cca83534ee6eff)
---
 .../epm/components/package_list_grid/controls.tsx      |  2 +-
 .../epm/components/package_list_grid/index.tsx         | 10 +---------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx
index 1466cd6cb9dc5..0678a22bf6795 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx
@@ -49,7 +49,7 @@ export const ControlsColumn = ({ controls, title }: ControlsColumnProps) => {
     );
   }
   return (
-    <EuiFlexGroup direction="column" gutterSize="none">
+    <EuiFlexGroup direction="column" gutterSize="none" className="kbnStickyMenu">
       {titleContent}
       {controls}
     </EuiFlexGroup>
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx
index d3d283accf4d0..85cdb962a2e8b 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx
@@ -161,15 +161,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({
 
   return (
     <EuiFlexGroup alignItems="flexStart" gutterSize="xl" data-test-subj="epmList.integrationCards">
-      <EuiFlexItem
-        data-test-subj="epmList.controlsSideColumn"
-        grow={1}
-        style={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 100,
-        }}
-      >
+      <EuiFlexItem data-test-subj="epmList.controlsSideColumn" grow={1} className="kbnStickyMenu">
         <ControlsColumn controls={controls} title={title} />
       </EuiFlexItem>
       <EuiFlexItem grow={5} data-test-subj="epmList.mainColumn">