feat: Reorder PageHeader and SubmenuBar using flex-col-reverse

Implemented elegant CSS-only solution for header ordering.

Solution:
- Wrapped PageHeader and SubmenuBar in flex container
- Mobile: flex-col (PageHeader first, then SubmenuBar)
- Desktop: flex-col-reverse (SubmenuBar first, then PageHeader)

Result:
✅ Mobile: Contextual header stays on top (better UX)
✅ Desktop: Submenu tabs appear above contextual header (traditional layout)
✅ No JavaScript logic needed
✅ Pure CSS flexbox solution
✅ Applied to both fullscreen and normal layouts

Benefits:
- Clean, maintainable code
- No conditional rendering complexity
- Responsive without media query logic
- Performance: CSS-only, no re-renders

admin-spa/src/App.tsx

@@ -487,12 +487,15 @@ function Shell() {
             </div>
           ) : (
             <div className="flex flex-1 flex-col min-h-0">
-              <PageHeader fullscreen={true} />
-              {!isMorePage && (isDashboardRoute ? (
-                <DashboardSubmenuBar items={main.children} fullscreen={true} />
-              ) : (
-                <SubmenuBar items={main.children} fullscreen={true} />
-              ))}
+              {/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
+              <div className="flex flex-col md:flex-col-reverse">
+                <PageHeader fullscreen={true} />
+                {!isMorePage && (isDashboardRoute ? (
+                  <DashboardSubmenuBar items={main.children} fullscreen={true} />
+                ) : (
+                  <SubmenuBar items={main.children} fullscreen={true} />
+                ))}
+              </div>
               <main className="flex-1 flex flex-col min-h-0 min-w-0 pb-14">
                 <div ref={scrollContainerRef} className="flex-1 overflow-auto p-4 min-w-0">
                   <AppRoutes />
@@ -505,12 +508,15 @@ function Shell() {
         ) : (
           <div className="flex flex-1 flex-col min-h-0">
             <TopNav />
-            <PageHeader fullscreen={false} />
-            {isDashboardRoute ? (
-              <DashboardSubmenuBar items={main.children} fullscreen={false} />
-            ) : (
-              <SubmenuBar items={main.children} fullscreen={false} />
-            )}
+            {/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
+            <div className="flex flex-col md:flex-col-reverse">
+              <PageHeader fullscreen={false} />
+              {isDashboardRoute ? (
+                <DashboardSubmenuBar items={main.children} fullscreen={false} />
+              ) : (
+                <SubmenuBar items={main.children} fullscreen={false} />
+              )}
+            </div>
             <main className="flex-1 flex flex-col min-h-0 min-w-0">
               <div className="flex-1 overflow-auto p-4 min-w-0">
                 <AppRoutes />