From 275ee3bea6ef310cd80ff986b29f13aec652d65d Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 20 Jul 2025 12:00:11 +0200
Subject: [PATCH] feat: update layout in PrerenderProduct to match SPA design
 with invisible placeholders for SearchBar and ButtonGroup

---
 src/PrerenderProduct.js | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/PrerenderProduct.js b/src/PrerenderProduct.js
index 6d7c0df..64ada6d 100644
--- a/src/PrerenderProduct.js
+++ b/src/PrerenderProduct.js
@@ -75,8 +75,8 @@ class PrerenderProduct extends React.Component {
           Toolbar,
           { sx: { minHeight: 64, py: { xs: 0.5, sm: 0 } } },
           React.createElement(
-            Box,
-            { sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 }, maxWidth: { xs: 'none', sm: '1200px' }, mx: { xs: 0, sm: 'auto' }, width: '100%' } },
+            Container,
+            { maxWidth: 'lg', sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 } } },
             // Desktop: simple layout, Mobile: column layout with SearchBar space
             React.createElement(
               Box,
@@ -88,7 +88,7 @@ class PrerenderProduct extends React.Component {
                   flexDirection: { xs: 'column', sm: 'row' }
                 }
               },
-              // First row: Logo (and ButtonGroup on mobile in SPA, but we don't need ButtonGroup in prerender)
+              // First row: Logo and invisible placeholders to match SPA layout
               React.createElement(
                 Box,
                 { 
@@ -96,12 +96,40 @@ class PrerenderProduct extends React.Component {
                     display: 'flex', 
                     alignItems: 'center', 
                     width: '100%',
-                    justifyContent: { xs: 'flex-start', sm: 'flex-start' }, // Keep desktop simple
+                    justifyContent: { xs: 'space-between', sm: 'flex-start' }, // Match SPA layout
                     minHeight: { xs: 52, sm: 'auto' },
                     px: { xs: 0, sm: 0 }
                   }
                 },
-                React.createElement(Logo)
+                React.createElement(Logo),
+                // Invisible SearchBar placeholder on desktop to match SPA spacing
+                React.createElement(
+                  Box,
+                  { 
+                    sx: { 
+                      display: { xs: 'none', sm: 'block' }, 
+                      flexGrow: 1,
+                      mx: { xs: 0, sm: 2, md: 4 },
+                      visibility: 'hidden',
+                      height: 40 // Match SearchBar height
+                    }
+                  }
+                ),
+                // Invisible ButtonGroup placeholder to match SPA spacing  
+                React.createElement(
+                  Box,
+                  { 
+                    sx: { 
+                      display: { xs: 'flex', sm: 'flex' },
+                      alignItems: { xs: 'flex-end', sm: 'center' },
+                      transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
+                      ml: { xs: 0, sm: 0 },
+                      visibility: 'hidden',
+                      width: { xs: 'auto', sm: '120px' }, // Approximate ButtonGroup width
+                      height: 40
+                    }
+                  }
+                )
               ),
               // Second row: SearchBar placeholder only on mobile
               React.createElement(