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/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>