From 17de97d706020115db0d2423eee74d0ccbf8e9fd Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Fri, 24 Mar 2023 17:48:04 +0100
Subject: [PATCH] docs full page mastheads toolbar formating fix

---
 .../NotificationDrawer/NotificationDrawer.md      |  6 ++++--
 .../AlertGroupToastWithNotificationDrawer.tsx     | 15 +++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
index 2351f7b1b56..38954705c12 100644
--- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
+++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
@@ -238,7 +238,7 @@ class BasicNotificationDrawer extends React.Component {
       </DropdownGroup>
     ];
     const headerToolbar = (
-      <Toolbar>
+      <Toolbar isFullHeight>
         <ToolbarContent>
           <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
@@ -293,6 +293,7 @@ class BasicNotificationDrawer extends React.Component {
                   position="right"
                   onSelect={this.onDropdownSelect}
                   isOpen={isDropdownOpen}
+                  isFullHeight
                   toggle={
                     <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
                       John Smith
@@ -832,7 +833,7 @@ class GroupedNotificationDrawer extends React.Component {
       </DropdownGroup>
     ];
     const headerToolbar = (
-      <Toolbar>
+      <Toolbar isFullHeight>
         <ToolbarContent>
           <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
@@ -887,6 +888,7 @@ class GroupedNotificationDrawer extends React.Component {
                   position="right"
                   onSelect={this.onDropdownSelect}
                   isOpen={isDropdownOpen}
+                  isFullHeight
                   toggle={
                     <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
                       John Smith
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index 731f76f821c..19c0454f5b0 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -27,7 +27,8 @@ import {
   Alert,
   AlertProps,
   AlertGroup,
-  AlertActionCloseButton
+  AlertActionCloseButton,
+  ToolbarItem,
 } from '@patternfly/react-core';
 
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
@@ -206,11 +207,13 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   const alertButtonStyle = { marginRight: '8px', marginTop: '8px' };
 
   const notificationBadge = (
-    <NotificationBadge
-      variant={getNotificationBadgeVariant()}
-      onClick={onNotificationBadgeClick}
-      aria-label="Notifications"
-    ></NotificationBadge>
+    <ToolbarItem>
+      <NotificationBadge
+        variant={getNotificationBadgeVariant()}
+        onClick={onNotificationBadgeClick}
+        aria-label="Notifications"
+      ></NotificationBadge>
+    </ToolbarItem>
   );
 
   const notificationDrawerActions = [