From 82231ee124dfe611c9062cc5a62ec8ca7d9e711e Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Mon, 30 Mar 2026 20:58:23 +1100
Subject: [PATCH] WizardLayout: generous padding on detail-toggles layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added maxWidth: 1200px + mx: auto to constrain content width
- Increased panel padding (px: 5 both sides)
- Left 58% / right 42% split for better reading width
- No longer edge-to-edge — content is readable and centered

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../templates/WizardLayout/WizardLayout.tsx   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/templates/WizardLayout/WizardLayout.tsx b/src/components/templates/WizardLayout/WizardLayout.tsx
index 149a30b..0cf6523 100644
--- a/src/components/templates/WizardLayout/WizardLayout.tsx
+++ b/src/components/templates/WizardLayout/WizardLayout.tsx
@@ -263,14 +263,23 @@ const DetailTogglesLayout: React.FC<{
   secondaryPanel?: React.ReactNode;
   backLink?: React.ReactNode;
 }> = ({ children, secondaryPanel, backLink }) => (
-  <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+  <Box
+    sx={{
+      display: 'flex',
+      flex: 1,
+      overflow: 'hidden',
+      maxWidth: 1200,
+      mx: 'auto',
+      width: '100%',
+    }}
+  >
     {/* Left panel — scrollable content */}
     <Box
       sx={{
-        width: { xs: '100%', md: '55%' },
+        width: { xs: '100%', md: '58%' },
         flexShrink: 0,
         overflowY: 'auto',
-        px: { xs: 2, md: 4 },
+        px: { xs: 2, md: 5 },
         pt: 0,
         pb: 3,
         scrollbarWidth: 'thin',
@@ -295,9 +304,9 @@ const DetailTogglesLayout: React.FC<{
     <Box
       sx={{
         display: { xs: 'none', md: 'block' },
-        width: { md: '45%' },
+        width: { md: '42%' },
         overflowY: 'auto',
-        px: 4,
+        px: 5,
         py: 3,
         borderLeft: '1px solid',
         borderColor: 'divider',