[Security Solution][Admin][Policy] Fixes bug in policy details form w…

…here sticky bottom bar hides the side nav bar (#161492)

## Summary

- [x] Fixes sticky bottom bar to go behind the side nav in policy
details
- [x] Adds functional test to ensure bug does not get reopened
##
BEFORE

![olm-bug-policy-details-bottom-bar](https://user-images.githubusercontent.com/56442535/217864225-77f025be-c158-4d01-96c2-e0c43afb23e4.gif)

AFTER

![image](https://github.com/elastic/kibana/assets/56409205/766f983a-d731-4dba-a0ea-96f384090cda)

![image](https://github.com/elastic/kibana/assets/56409205/1b078b1e-61d7-4227-b543-f92c58d79acd)

---------

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx

@@ -12,7 +12,6 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiLoadingSpinner,
-  EuiBottomBar,
   EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -21,6 +20,7 @@ import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import type { ApplicationStart } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import { useShowEditableFormFields, usePolicyDetailsSelector } from '../../policy_hooks';
 import {
   policyDetails,
@@ -159,7 +159,7 @@ export const PolicyFormLayout = React.memo(() => {
       )}
       <PolicyDetailsForm />
       <EuiSpacer size="xxl" />
-      <EuiBottomBar paddingSize="s">
+      <KibanaPageTemplate.BottomBar paddingSize="s">
         <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
@@ -190,7 +190,7 @@ export const PolicyFormLayout = React.memo(() => {
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
-      </EuiBottomBar>
+      </KibanaPageTemplate.BottomBar>
     </>
   );
 });

x-pack/test/security_solution_endpoint/apps/integrations/policy_details.ts

@@ -72,6 +72,14 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         );
       });
 
+      it('should not hide the side navigation', async () => {
+        await testSubjects.scrollIntoView('solutionSideNavItemLink-get_started');
+        // ensure center of button is visible and not hidden by sticky bottom bar
+        await testSubjects.click('solutionSideNavItemLink-administration', 1000, 15);
+        // test cleanup: go back to policy details page
+        await pageObjects.policy.navigateToPolicyDetails(policyInfo.packagePolicy.id);
+      });
+
       it('and the show advanced settings button is clicked', async () => {
         await testSubjects.missingOrFail('advancedPolicyPanel');