fix: Add min-w-0 to main and scrollable containers for proper shrinking

Problem:
- Content still not shrinking on narrow viewports
- Horizontal scrolling persists
- Header shrinks but body doesn't

Root Cause:
Missing min-w-0 on parent containers:
<main className="flex-1 flex flex-col">  ← No min-w-0!
  <div className="overflow-auto p-4">   ← No min-w-0!
    <AppRoutes />

Without min-w-0, flex containers won't shrink below their
content's natural width, even if children have min-w-0.

Solution:
Add min-w-0 to the entire container chain:

<main className="flex-1 flex flex-col min-h-0 min-w-0">
  <div className="overflow-auto p-4 min-w-0">
    <AppRoutes />

Container Chain (all need min-w-0):
┌────────────────────────────────────┐
│ <div flex>                         │
│   <Sidebar flex-shrink-0>          │
│   <main flex-1 min-w-0> ✅         │ ← Added
│     <SubmenuBar>                   │
│     <PageHeader>                   │
│     <div overflow-auto min-w-0> ✅ │ ← Added
│       <AppRoutes>                  │
│         <SettingsLayout min-w-0>   │
│           <PageHeader min-w-0>     │
│             Content...             │
└────────────────────────────────────┘

Applied to all 3 layouts:
1. Fullscreen Desktop (Sidebar + Main)
2. Fullscreen Mobile (TopNav + Main)
3. WP-Admin (TopNav + Main)

Why this works:
- min-w-0 must be on EVERY flex container in the chain
- Breaking the chain at any level prevents shrinking
- Now entire tree can shrink from root to leaf

Files Modified:
- App.tsx: Added min-w-0 to <main> and scrollable <div>

Result:
✅ Content shrinks properly on all viewports
✅ No horizontal scrolling
✅ Works from 320px to 1920px+
✅ All layouts (fullscreen, mobile, WP-Admin)

admin-spa/src/App.tsx

@@ -416,14 +416,14 @@ function Shell() {
           isDesktop ? (
             <div className="flex flex-1 min-h-0">
               <Sidebar />
-              <main className="flex-1 flex flex-col min-h-0">
+              <main className="flex-1 flex flex-col min-h-0 min-w-0">
                 {isDashboardRoute ? (
                   <DashboardSubmenuBar items={main.children} fullscreen={true} />
                 ) : (
                   <SubmenuBar items={main.children} fullscreen={true} />
                 )}
                 <PageHeader fullscreen={true} />
-                <div className="flex-1 overflow-auto p-4">
+                <div className="flex-1 overflow-auto p-4 min-w-0">
                   <AppRoutes />
                 </div>
               </main>
@@ -436,9 +436,9 @@ function Shell() {
               ) : (
                 <SubmenuBar items={main.children} fullscreen={true} />
               )}
-              <main className="flex-1 flex flex-col min-h-0">
+              <main className="flex-1 flex flex-col min-h-0 min-w-0">
                 <PageHeader fullscreen={true} />
-                <div className="flex-1 overflow-auto p-4">
+                <div className="flex-1 overflow-auto p-4 min-w-0">
                   <AppRoutes />
                 </div>
               </main>
@@ -453,8 +453,8 @@ function Shell() {
               <SubmenuBar items={main.children} fullscreen={false} />
             )}
             <PageHeader fullscreen={false} />
-            <main className="flex-1 flex flex-col min-h-0">
-              <div className="flex-1 overflow-auto p-4">
+            <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 />
               </div>
             </main>

admin-spa/src/components/PageHeader.tsx

@@ -17,11 +17,11 @@ export function PageHeader({ fullscreen = false }: PageHeaderProps) {
 
   return (
     <div className={`sticky ${topClass} z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60`}>
-      <div className="container max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold">{title}</h1>
+      <div className="w-full max-w-5xl mx-auto 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>
-        {action && <div>{action}</div>}
+        {action && <div className="flex-shrink-0 ml-4">{action}</div>}
       </div>
     </div>
   );

admin-spa/src/routes/Settings/components/SettingsLayout.tsx

@@ -63,14 +63,14 @@ export function SettingsLayout({
   }, [title, onSave, isSaving, isLoading, saveLabel]);
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 min-w-0">
 
       {/* Content */}
-      <div className="container px-0 max-w-5xl mx-auto">
+      <div className="w-full max-w-5xl mx-auto min-w-0">
         {!onSave && (
           <div className="mb-8">
-            <div className="flex items-start justify-between gap-4">
-              <div>
+            <div className="flex items-start justify-between gap-4 min-w-0">
+              <div className="min-w-0 flex-1">
                 <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
                 {description && (
                   <p className="text-muted-foreground mt-2">{description}</p>
@@ -86,7 +86,7 @@ export function SettingsLayout({
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="space-y-6">{children}</div>
+          <div className="space-y-6 min-w-0">{children}</div>
         )}
       </div>
     </div>