fixed sidebar nav vertical scroll on smaller screens (#36348)

Closes #36338

Signed-off-by: Yousif Magdi <yousifmagdi@gmail.com>

js/apps/admin-ui/src/App.tsx

@@ -3,7 +3,7 @@ import {
   mainPageContentId,
   useEnvironment,
 } from "@keycloak/keycloak-ui-shared";
-import { Page } from "@patternfly/react-core";
+import { Flex, FlexItem, Page } from "@patternfly/react-core";
 import { PropsWithChildren, Suspense, useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 
@@ -25,6 +25,7 @@ import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
 import type { Environment } from "./environment";
 import { SubGroups } from "./groups/SubGroupsContext";
 import { AuthWall } from "./root/AuthWall";
+import { Banners } from "./Banners";
 
 const AppContexts = ({ children }: PropsWithChildren) => (
   <ErrorBoundaryProvider>
@@ -58,21 +59,33 @@ export const App = () => {
   return (
     <AdminClientContext.Provider value={{ keycloak, adminClient }}>
       <AppContexts>
-        <Page
-          header={<Header />}
-          isManagedSidebar
-          sidebar={<PageNav />}
-          breadcrumb={<PageBreadCrumbs />}
-          mainContainerId={mainPageContentId}
+        <Flex
+          direction={{ default: "column" }}
+          flexWrap={{ default: "nowrap" }}
+          spaceItems={{ default: "spaceItemsNone" }}
+          style={{ height: "100%" }}
         >
-          <ErrorBoundaryFallback fallback={ErrorRenderer}>
-            <Suspense fallback={<KeycloakSpinner />}>
-              <AuthWall>
-                <Outlet />
-              </AuthWall>
-            </Suspense>
-          </ErrorBoundaryFallback>
-        </Page>
+          <FlexItem>
+            <Banners />
+          </FlexItem>
+          <FlexItem grow={{ default: "grow" }} style={{ minHeight: 0 }}>
+            <Page
+              header={<Header />}
+              isManagedSidebar
+              sidebar={<PageNav />}
+              breadcrumb={<PageBreadCrumbs />}
+              mainContainerId={mainPageContentId}
+            >
+              <ErrorBoundaryFallback fallback={ErrorRenderer}>
+                <Suspense fallback={<KeycloakSpinner />}>
+                  <AuthWall>
+                    <Outlet />
+                  </AuthWall>
+                </Suspense>
+              </ErrorBoundaryFallback>
+            </Page>
+          </FlexItem>
+        </Flex>
       </AppContexts>
     </AdminClientContext.Provider>
   );

js/apps/admin-ui/src/page-nav.css

@@ -2,4 +2,5 @@
 .keycloak__page_nav__nav {
   --pf-v5-c-page__sidebar--Transition: all 50ms cubic-bezier(.42, 0, .58, 1);
   overflow: inherit;
+  overflow-y: auto;
 }