From bb9dd7578352a909a65a49f72e16fffa77a93b9c Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 3 Feb 2024 22:12:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(Page):=20improve?=
 =?UTF-8?q?=20main=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/templates/Page/Page.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/templates/Page/Page.tsx b/src/components/templates/Page/Page.tsx
index 7ac8bc7..c861831 100644
--- a/src/components/templates/Page/Page.tsx
+++ b/src/components/templates/Page/Page.tsx
@@ -17,14 +17,35 @@ const Page: React.FC<BoxProps> = ({ title, children, ...props }) => {
   return (
     <Box sx={{ flexGrow: 1 }} aria-label="page">
       <Toobar />
-      <Container component="main" sx={{ mt: 12, mb: 4, minHeight: '80vh', ...props.sx }} maxWidth="sm">
+      <Container
+        component="main"
+        maxWidth={false}
+        sx={{
+          mt: 12,
+          mb: 4,
+          minHeight: '80vh',
+          mx: 'auto',
+          maxWidth: 'calc(100% - 4em)',
+          width: '70em',
+          ...props.sx,
+        }}>
         {/* Children is included in props */}
         {title && (
           <>
             <Typography
               variant="h2"
               aria-label="page-title"
-              sx={{ textAlign: 'center', borderColor: 'primary.main', borderBottomStyle: 'solid', borderBottomWidth: 2, mt: 6, mb: 4, p: 6 }}>
+              sx={{
+                textAlign: 'center',
+                borderColor: 'primary.main',
+                borderBottomStyle: 'solid',
+                borderBottomWidth: 2,
+                mx: 'auto',
+                mt: 6,
+                mb: 4,
+                p: 6,
+                width: '60%',
+              }}>
               {title}
             </Typography>
           </>