From ddd1d805549543340bfba97fdc5a2e0b972c486a Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:09:11 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(Page):=20improve?=
 =?UTF-8?q?=20title=20spacing=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/templates/Page/Page.tsx | 49 +++++++++++++++-----------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/templates/Page/Page.tsx b/src/components/templates/Page/Page.tsx
index c861831..ec0baf9 100644
--- a/src/components/templates/Page/Page.tsx
+++ b/src/components/templates/Page/Page.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, BoxProps, Container, Typography } from '@mui/material'
+import { Box, BoxProps, Container, Divider, Typography } from '@mui/material'
 
 import { Footer, Toobar } from 'components/molecules'
 
@@ -17,6 +17,32 @@ const Page: React.FC<BoxProps> = ({ title, children, ...props }) => {
   return (
     <Box sx={{ flexGrow: 1 }} aria-label="page">
       <Toobar />
+      {title && (
+        <>
+          <Typography
+            variant="h2"
+            aria-label="page-title"
+            textAlign="center"
+            sx={{
+              mt: 6,
+              p: 6,
+            }}>
+            {title}
+          </Typography>
+          <Divider
+            variant="middle"
+            sx={{
+              borderColor: 'primary.main',
+              borderStyle: 'solid',
+              borderWidth: 2,
+              mx: 'auto',
+              mb: 4,
+              width: '30em',
+              maxWidth: 'calc(60% - 2.5em)',
+            }}
+          />
+        </>
+      )}
       <Container
         component="main"
         maxWidth={false}
@@ -30,26 +56,7 @@ const Page: React.FC<BoxProps> = ({ title, children, ...props }) => {
           ...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,
-                mx: 'auto',
-                mt: 6,
-                mb: 4,
-                p: 6,
-                width: '60%',
-              }}>
-              {title}
-            </Typography>
-          </>
-        )}
+
         {children}
       </Container>
       <Footer />