From 0c57bbc780f2e1a525814a3018e42718da36651b Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 8 Nov 2025 21:01:38 +0700
Subject: [PATCH] fix: Apply flex-col-reverse to desktop fullscreen layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed missing flex-col-reverse in desktop sidebar mode.

Issue:
- Desktop fullscreen (sidebar mode) was missing the flex wrapper
- PageHeader appeared above SubmenuBar instead of below
- Only mobile and wp-admin layouts had the fix

Fix:
- Added flex-col-reverse wrapper to desktop fullscreen layout
- Now all three layout modes have correct header ordering:
  1. Desktop Fullscreen (Sidebar): SubmenuBar → PageHeader ✅
  2. Mobile Fullscreen: PageHeader → SubmenuBar (mobile), SubmenuBar → PageHeader (desktop) ✅
  3. Normal wp-admin: PageHeader → SubmenuBar (mobile), SubmenuBar → PageHeader (desktop) ✅

Result:
✅ Settings pages now show submenu tabs above contextual header
✅ Consistent across all layout modes
✅ Works on all screen sizes
---
 admin-spa/src/App.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index dbf3292..87ffce7 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -474,12 +474,15 @@ function Shell() {
             <div className="flex flex-1 min-h-0">
               <Sidebar />
               <main className="flex-1 flex flex-col min-h-0 min-w-0">
-                <PageHeader fullscreen={true} />
-                {isDashboardRoute ? (
-                  <DashboardSubmenuBar items={main.children} fullscreen={true} />
-                ) : (
-                  <SubmenuBar items={main.children} fullscreen={true} />
-                )}
+                {/* Flex wrapper: desktop = col-reverse (SubmenuBar first, PageHeader second) */}
+                <div className="flex flex-col-reverse">
+                  <PageHeader fullscreen={true} />
+                  {isDashboardRoute ? (
+                    <DashboardSubmenuBar items={main.children} fullscreen={true} />
+                  ) : (
+                    <SubmenuBar items={main.children} fullscreen={true} />
+                  )}
+                </div>
                 <div className="flex-1 overflow-auto p-4 min-w-0">
                   <AppRoutes />
                 </div>