chore: use PageLayout.Header on all pages (#452)

* chore: use PageLayout.Header on all pages

* feat: remove page layout header component

Author: lee-chase

package-lock.json

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,6 +10,11 @@
 @use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/breakpoint' as *;
 
+.cs--common-header {
+  padding-block-start: $spacing-05;
+  margin-block-end: $spacing-05;
+}
+
 .cs--common-header__content {
   // This CSS follow the principles of a condensed carbon grid with 2x2
   display: grid;

src/components/commonHeader/commonHeader.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,30 +10,32 @@ import { Children, Suspense } from 'react';
 import { Nav } from '../components/nav/Nav';
 import classNames from 'classnames';
 
-export const PageLayout = ({ children, className, fallback }) => {
-  const childArray = Children.toArray(children);
-  const otherChildren = childArray.filter(
-    (child) => child.type !== PageLayoutHeader,
-  );
-  const Header = childArray.find((child) => child.type === PageLayoutHeader);
+/**
+ * PageLayout component provides a consistent layout structure for pages in the application.
+ * It includes the navigation component and wraps content in Carbon's Content component.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components to render within the layout
+ * @param {string} [props.className] - Additional CSS class names to apply to the layout container
+ * @param {React.ReactNode} [props.fallback] - Fallback content to display while Suspense is loading
+ *
+ * @example
+ * <PageLayout>
+ *   <h1>Page Content</h1>
+ * </PageLayout>
+ *
+ */
 
+export const PageLayout = ({ children, className, fallback }) => {
   return (
     <Suspense fallback={fallback}>
       <div className={classNames('cs--page-layout', className)}>
         <Nav />
-        <Content className="cs--content">
-          <div className="cs--page-layout__content">
-            {Header}
-            <div className="cs--page-layout__content-body">{otherChildren}</div>
-          </div>
+        <Content className="cs--content cs--page-layout__content">
+          {children}
         </Content>
       </div>
     </Suspense>
   );
 };
-
-const PageLayoutHeader = ({ children }) => (
-  <div className="cs--page-layout__content-header">{children}</div>
-);
-PageLayoutHeader.displayName = 'PageLayoutHeader';
-PageLayout.Header = PageLayoutHeader;