From 3df20cbc6ad6f2bccb85aecb689875c2652323bd Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 20 Jul 2025 00:34:46 +0200
Subject: [PATCH] refactor: replace Box with Container for improved layout
 consistency in PrerenderProduct and ProductDetailPage components

---
 src/PrerenderProduct.js             | 5 ++---
 src/components/ProductDetailPage.js | 9 ++++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/PrerenderProduct.js b/src/PrerenderProduct.js
index f29e6a0..3e14f8d 100644
--- a/src/PrerenderProduct.js
+++ b/src/PrerenderProduct.js
@@ -83,13 +83,12 @@ class PrerenderProduct extends React.Component {
         Box,
         { sx: { flexGrow: 1 } },
         React.createElement(
-          Box,
+          Container,
           {
+            maxWidth: "lg",
             sx: {
               p: { xs: 2, md: 2 },
               pb: { xs: 4, md: 8 },
-              maxWidth: "1400px",
-              mx: "auto",
               flexGrow: 1
             }
           },
diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js
index 8893598..43d72a9 100644
--- a/src/components/ProductDetailPage.js
+++ b/src/components/ProductDetailPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Box, Typography, CardMedia, Stack, Chip, Button, Collapse } from "@mui/material";
+import { Box, Container, Typography, CardMedia, Stack, Chip, Button, Collapse } from "@mui/material";
 import { Link } from "react-router-dom";
 import parse from "html-react-parser";
 import AddToCartButton from "./AddToCartButton.js";
@@ -601,12 +601,11 @@ class ProductDetailPage extends Component {
     }).format(product.price);
 
     return (
-      <Box
+      <Container
+        maxWidth="lg"
         sx={{
           p: { xs: 2, md: 2 },
           pb: { xs: 4, md: 8 },
-          maxWidth: "1400px",
-          mx: "auto",
           flexGrow: 1
         }}
       >
@@ -1256,7 +1255,7 @@ class ProductDetailPage extends Component {
             </Box>
           </Box>
         )}
-      </Box>
+      </Container>
     );
   }
 }