fix: Apply flex-col-reverse to desktop fullscreen layout
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
This commit is contained in:
@@ -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">
|
||||
{/* 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>
|
||||
|
||||
Reference in New Issue
Block a user