fix: align PageHeader with container utilities

Add container-wrapper and container wrappers to PageHeader
to align header content with the middle section grid.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: abdout

src/components/atom/page-header.tsx

@@ -26,43 +26,45 @@ export function PageHeader({
   ...props
 }: PageHeaderProps) {
   return (
-    <section className={cn("border-grid border-b-[0.5px]", className)} {...props}>
-      <div className="flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
-        {announcement && (
-          <div className={cn(announcementClassName)}>
-            {announcement}
-          </div>
-        )}
-        {heading && (
-          <h2
-            className={cn(
-              headingClassName
-            )}
-          >
-            {heading}
-          </h2>
-        )}
-        {description && (
-          <p
-            className={cn(
-              "max-w-2xl text-balance text-base font-light text-foreground leading-7 sm:text-lg ",
-              descriptionClassName
-            )}
-          >
-            {description}
-          </p>
-        )}
-        {actions && (
-          <div
-            className={cn(
-              "flex w-full items-center justify-start gap-2 pt-2",
-              actionsClassName
-            )}
-          >
-            {actions}
-          </div>
-        )}
-        {children}
+    <section className={cn("border-grid", className)} {...props}>
+      <div className="container-wrapper">
+        <div className="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+          {announcement && (
+            <div className={cn(announcementClassName)}>
+              {announcement}
+            </div>
+          )}
+          {heading && (
+            <h2
+              className={cn(
+                headingClassName
+              )}
+            >
+              {heading}
+            </h2>
+          )}
+          {description && (
+            <p
+              className={cn(
+                "max-w-2xl text-balance text-base font-light text-foreground leading-7 sm:text-lg",
+                descriptionClassName
+              )}
+            >
+              {description}
+            </p>
+          )}
+          {actions && (
+            <div
+              className={cn(
+                "flex w-full items-center justify-start gap-2 pt-2",
+                actionsClassName
+              )}
+            >
+              {actions}
+            </div>
+          )}
+          {children}
+        </div>
       </div>
     </section>
   )