From b592d508294e7986a3bcb7d037c39c15e2fcaefb Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 20 Nov 2025 09:49:03 +0700
Subject: [PATCH] fix: PageHeader max-w-5xl only for settings pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Issue:**
- PageHeader had max-w-5xl hardcoded
- This made all pages boxed (Orders, Products, etc.)
- Only settings pages should be boxed

**Solution:**
- Use useLocation to detect current route
- Apply max-w-5xl only when pathname starts with '/settings'
- All other pages get full width (w-full)

**Result:**
✅ Settings pages: Boxed layout (max-w-5xl)
✅ Other pages: Full width layout
✅ Consistent with design system
---
 admin-spa/src/components/PageHeader.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/admin-spa/src/components/PageHeader.tsx b/admin-spa/src/components/PageHeader.tsx
index d8d95df..98fd738 100644
--- a/admin-spa/src/components/PageHeader.tsx
+++ b/admin-spa/src/components/PageHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { usePageHeader } from '@/contexts/PageHeaderContext';
+import { useLocation } from 'react-router-dom';
 
 interface PageHeaderProps {
   fullscreen?: boolean;
@@ -8,15 +9,21 @@ interface PageHeaderProps {
 
 export function PageHeader({ fullscreen = false, hideOnDesktop = false }: PageHeaderProps) {
   const { title, action } = usePageHeader();
+  const location = useLocation();
 
   if (!title) return null;
 
+  // Only apply max-w-5xl for settings pages (boxed layout)
+  // All other pages should be full width
+  const isSettingsPage = location.pathname.startsWith('/settings');
+  const containerClass = isSettingsPage ? 'w-full max-w-5xl mx-auto' : 'w-full';
+
   // PageHeader is now ABOVE submenu in DOM order
   // z-20 ensures it stays on top when both are sticky
   // Only hide on desktop if explicitly requested (for mobile-only headers)
   return (
     <div className={`sticky top-0 z-20 border-b bg-background ${hideOnDesktop ? 'md:hidden' : ''}`}>
-      <div className="w-full max-w-5xl mx-auto px-4 py-3 flex items-center justify-between min-w-0">
+      <div className={`${containerClass} px-4 py-3 flex items-center justify-between min-w-0`}>
         <div className="min-w-0 flex-1">
           <h1 className="text-lg font-semibold truncate">{title}</h1>
         </div>