fix merge error

Signed-off-by: Erik Jan de Wit <[email protected]>
edewit · Jan 8, 2025 · 26dd53a · 26dd53a
1 parent 6083b55
commit 26dd53a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 66 deletions.
diff --git a/js/apps/admin-ui/src/App.tsx b/js/apps/admin-ui/src/App.tsx
@@ -12,7 +12,6 @@ import {
   ErrorBoundaryProvider,
   KeycloakSpinner,
 } from "@keycloak/keycloak-ui-shared";
-import { Banners } from "./Banners";
 import { Header } from "./PageHeader";
 import { PageNav } from "./PageNav";
 import { AdminClientContext, initAdminClient } from "./admin-client";
@@ -59,7 +58,6 @@ export const App = () => {
   return (
     <AdminClientContext.Provider value={{ keycloak, adminClient }}>
       <AppContexts>
-        <Banners />
         <Page
           header={<Header />}
           isManagedSidebar

diff --git a/js/apps/admin-ui/src/PageHeader.tsx b/js/apps/admin-ui/src/PageHeader.tsx
@@ -19,6 +19,7 @@ import { BarsIcon, EllipsisVIcon, HelpIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHref } from "react-router-dom";
+import { Banners } from "./Banners";
 import { PageHeaderClearCachesModal } from "./PageHeaderClearCachesModal";
 import { HelpHeader } from "./components/help-enabler/HelpHeader";
 import { useAccess } from "./context/access/Access";
@@ -195,67 +196,70 @@ export const Header = () => {
   const logoUrl = environment.logoUrl ? environment.logoUrl : url;
 
   return (
-    <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label={t("navigation")}>
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
-      <MastheadBrand href={logoUrl}>
-        <img
-          src={
-            logo.startsWith("/")
-              ? joinPath(environment.resourceUrl, logo)
-              : logo
-          }
-          id="masthead-logo"
-          alt={t("logo")}
-          aria-label={t("logo")}
-          className="keycloak__pageheader_brand"
-        />
-      </MastheadBrand>
-      <MastheadContent>
-        <Toolbar>
-          <ToolbarContent>
-            <ToolbarItem
-              align={{ default: "alignRight" }}
-              visibility={{
-                default: "hidden",
-                md: "visible",
-              }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-            >
-              <HelpHeader />
-            </ToolbarItem>
-            <ToolbarItem
-              align={{ default: "alignLeft" }}
-              visibility={{
-                md: "hidden",
-              }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-            >
-              <KebabDropdown />
-            </ToolbarItem>
-            <ToolbarItem
-              visibility={{
-                default: "hidden",
-                md: "visible",
-              }} /** this user dropdown is hidden on mobile sizes */
-            >
-              <UserDropdown />
-            </ToolbarItem>
-            <ToolbarItem
-              variant="overflow-menu"
-              align={{ default: "alignRight" }}
-              className="pf-v5-u-m-0-on-lg"
-            >
-              <Avatar
-                src={picture || environment.resourceUrl + "/img_avatar.svg"}
-                alt={t("avatarImage")}
-                aria-label={t("avatarImage")}
-              />
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-      </MastheadContent>
-    </Masthead>
+    <>
+      <Banners />
+      <Masthead>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label={t("navigation")}>
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand href={logoUrl}>
+          <img
+            src={
+              logo.startsWith("/")
+                ? joinPath(environment.resourceUrl, logo)
+                : logo
+            }
+            id="masthead-logo"
+            alt={t("logo")}
+            aria-label={t("logo")}
+            className="keycloak__pageheader_brand"
+          />
+        </MastheadBrand>
+        <MastheadContent>
+          <Toolbar>
+            <ToolbarContent>
+              <ToolbarItem
+                align={{ default: "alignRight" }}
+                visibility={{
+                  default: "hidden",
+                  md: "visible",
+                }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
+              >
+                <HelpHeader />
+              </ToolbarItem>
+              <ToolbarItem
+                align={{ default: "alignLeft" }}
+                visibility={{
+                  md: "hidden",
+                }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
+              >
+                <KebabDropdown />
+              </ToolbarItem>
+              <ToolbarItem
+                visibility={{
+                  default: "hidden",
+                  md: "visible",
+                }} /** this user dropdown is hidden on mobile sizes */
+              >
+                <UserDropdown />
+              </ToolbarItem>
+              <ToolbarItem
+                variant="overflow-menu"
+                align={{ default: "alignRight" }}
+                className="pf-v5-u-m-0-on-lg"
+              >
+                <Avatar
+                  src={picture || environment.resourceUrl + "/img_avatar.svg"}
+                  alt={t("avatarImage")}
+                  aria-label={t("avatarImage")}
+                />
+              </ToolbarItem>
+            </ToolbarContent>
+          </Toolbar>
+        </MastheadContent>
+      </Masthead>
+    </>
   );
 };
diff --git a/js/apps/admin-ui/src/index.css b/js/apps/admin-ui/src/index.css
@@ -31,9 +31,10 @@ input[type="checkbox"] {
   width: fit-content;
 }
 
-#app {
-  overflow: hidden;
+div.pf-v5-c-page {
   grid-column-start: banners;
+  grid-template-rows: max-content max-content 1fr;
+  grid-template-areas:
     "banners banners"
     "header header"
     "nav main";