diff --git a/package.json b/package.json index 7b07040..35d6adb 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "lint": "eslint src/**/*.{js,jsx}", "prerender": "node prerender.cjs", "prerender:prod": "cross-env NODE_ENV=production node prerender.cjs", + "prerender:product": "node prerender-single-product.cjs", + "prerender:product:prod": "cross-env NODE_ENV=production node prerender-single-product.cjs", "build:prerender": "npm run build:client && npm run prerender:prod", "translate": "node translate-i18n.js", "translate:english": "node translate-i18n.js --only-english", diff --git a/src/PrerenderProduct.js b/src/PrerenderProduct.js index be93237..8e5f188 100644 --- a/src/PrerenderProduct.js +++ b/src/PrerenderProduct.js @@ -73,11 +73,71 @@ class PrerenderProduct extends React.Component { { position: 'sticky', color: 'primary', elevation: 0, sx: { zIndex: 1100 } }, React.createElement( Toolbar, - { sx: { minHeight: 64 } }, + { sx: { minHeight: 64, py: { xs: 0.5, sm: 0 } } }, React.createElement( Container, - { maxWidth: 'lg', sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 } } }, - React.createElement(Logo) + { maxWidth: { xs: false, sm: 'lg' }, sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 }, width: '100%' } }, + React.createElement( + Box, + { + sx: { + display: 'flex', + alignItems: 'center', + width: '100%', + maxWidth: '100%', + flexDirection: { xs: 'column', sm: 'row' }, + overflow: 'hidden' + } + }, + React.createElement( + Box, + { + sx: { + display: 'flex', + alignItems: 'center', + width: '100%', + maxWidth: '100%', + justifyContent: { xs: 'space-between', sm: 'flex-start' }, + minHeight: { xs: 52, sm: 'auto' }, + px: { xs: 0, sm: 0 }, + overflow: 'hidden' + } + }, + React.createElement(Logo), + // Invisible ButtonGroup placeholder for mobile layout + React.createElement( + Box, + { + sx: { + display: { xs: 'flex', sm: 'none' }, + alignItems: 'flex-end', + transform: 'translateY(4px) translateX(9px)', + ml: 0, + visibility: 'hidden', + width: 120, // Approximate width of ButtonGroup + height: 40 + } + } + ) + ), + // Invisible SearchBar placeholder for mobile - matches SPA layout + React.createElement( + Box, + { + sx: { + display: { xs: 'block', sm: 'none' }, + width: '100%', + maxWidth: '100%', + mt: { xs: 1, sm: 0 }, + mb: { xs: 0.5, sm: 0 }, + px: { xs: 0, sm: 0 }, + height: 41, // Small TextField height + visibility: 'hidden', + overflow: 'hidden' + } + } + ) + ) ) ) ), @@ -334,6 +394,7 @@ class PrerenderProduct extends React.Component { { sx: { mt: "auto", + transform: "translateY(-1px)", // Move 1px up p: 3, background: "#f9f9f9", borderRadius: 2, diff --git a/src/components/Footer.js b/src/components/Footer.js index f5ff1ba..6a5a9c3 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -275,7 +275,7 @@ class Footer extends Component { @@ -288,7 +288,7 @@ class Footer extends Component { position: 'relative', zIndex: 9999, display: 'inline-block', - height: { xs: 50, md: 60 }, + height: { xs: 57, md: 67 }, lineHeight: 1 }} onMouseEnter={this.handleReviewsMouseEnter} @@ -317,7 +317,7 @@ class Footer extends Component { position: 'relative', zIndex: 9999, display: 'inline-block', - height: { xs: 40, md: 50 }, + height: { xs: 47, md: 67 }, lineHeight: 1 }} onMouseEnter={this.handleMapsMouseEnter}