fix: resolve container width issues, spa redirects, and appearance settings overwrite. feat: enhance order/sub details and newsletter layout

admin-spa/src/routes/Appearance/General.tsx

@@ -29,6 +29,7 @@ export default function AppearanceGeneral() {
   const [customHeading, setCustomHeading] = useState('');
   const [customBody, setCustomBody] = useState('');
   const [fontScale, setFontScale] = useState([1.0]);
+  const [containerWidth, setContainerWidth] = useState<'boxed' | 'fullwidth'>('boxed');
 
   const fontPairs = {
     modern: { name: 'Modern & Clean', fonts: 'Inter' },
@@ -65,6 +66,9 @@ export default function AppearanceGeneral() {
             setCustomBody(general.typography.custom?.body || '');
             setFontScale([general.typography.scale || 1.0]);
           }
+          if (general.container_width) {
+            setContainerWidth(general.container_width);
+          }
           if (general.colors) {
             setColors({
               primary: general.colors.primary || '#1a1a1a',
@@ -110,6 +114,7 @@ export default function AppearanceGeneral() {
           custom: typographyMode === 'custom_google' ? { heading: customHeading, body: customBody } : undefined,
           scale: fontScale[0],
         },
+        containerWidth,
         colors,
       });
 
@@ -207,6 +212,36 @@ export default function AppearanceGeneral() {
               <strong>Tip:</strong> You can set this page as your homepage in Settings → Reading
             </p>
           </SettingsSection>
+
+          <SettingsSection label="Container Width" htmlFor="container-width">
+            <RadioGroup value={containerWidth} onValueChange={(value: any) => setContainerWidth(value)}>
+              <div className="flex items-start space-x-3">
+                <RadioGroupItem value="boxed" id="width-boxed" />
+                <div className="space-y-1">
+                  <Label htmlFor="width-boxed" className="font-medium cursor-pointer">
+                    Boxed
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Content centered with max-width (recommended)
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-3">
+                <RadioGroupItem value="fullwidth" id="width-full" />
+                <div className="space-y-1">
+                  <Label htmlFor="width-full" className="font-medium cursor-pointer">
+                    Full Width
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Content fills entire screen width
+                  </p>
+                </div>
+              </div>
+            </RadioGroup>
+            <p className="text-sm text-muted-foreground mt-2">
+              Default width for all pages (can be overridden per page)
+            </p>
+          </SettingsSection>
         </div>
       </SettingsCard>