♻️ refactor(template): update page margin handling

allow for full-width body elements

src/components/pages/ContactPage/ContactPage.tsx

@@ -39,7 +39,13 @@ const ListItemLink: React.FC<ListItemProps> = ({ children, ...props }) => (
 
 const ContactPage = () => {
   return (
-    <Page title="Contatti">
+    <Page
+      title="Contatti"
+      sx={{
+        width: theme => theme.breakpoints.values.lg,
+        px: 'auto',
+        mx: 'auto',
+      }}>
       <Typography align="left" variant="h6">
         Sentiti libero di contattatarci con uno qualsiasi dei seguenti:
       </Typography>

src/components/pages/PeoplePage/index.tsx

@@ -210,8 +210,14 @@ const ProjectsPage = () => {
     setDescription(null)
   }
   return (
-    <Page title="Personaggi">
-      <Typography pb={2}>
+    <Page
+      title="Personaggi"
+      sx={{
+        width: theme => theme.breakpoints.values.lg,
+        px: 'auto',
+        mx: 'auto',
+      }}>
+      <Typography px={{ xs: undefined, md: 2 }} pb={2}>
         Tutti i Personaggi storici della Compagnia sono realmente vissuti ed esistono attendibili fonti bibliografiche. Il gruppo è suddiviso per
         classi sociali: Uomini d'arme, Artigiani, Nobili Cavalieri, Nobildonne, uomini e donne del popolo; Ogni Personaggio, il suo ruolo e il suo
         comportamento sono fondamentali alla ricostruzione di uno spaccato della vita di un campo d'arme del tardo XIV Secolo.

src/components/templates/Page/Page.tsx

@@ -62,13 +62,13 @@ const Page: React.FC<PageProps> = ({ title, children, showCookieConsent, ...prop
       <Container
         id="page-content"
         component="main"
+        maxWidth={false}
         sx={{
-          mt: { xs: 8, md: 12 },
-          mb: 4,
+          mt: { xs: 4, md: 12 },
+          px: '0 !important',
           minHeight: '80vh',
-          mx: 'auto',
-          maxWidth: { xs: '100%', md: 'calc(100% - 4em)' },
-          width: theme => theme.breakpoints.values.lg,
+          maxWidth: '100%',
+          width: '100%',
           ...props.sx,
         }}>
         {children}