From 9518624fdbe63b75f12b74f32f8d35c0cc051fce Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 21 Sep 2024 19:17:35 +0200
Subject: [PATCH 1/4] [docs] Fix Sign-in template form experience

---
 .../getting-started/templates/sign-in-side/SignInCard.js         | 1 +
 .../getting-started/templates/sign-in-side/SignInCard.tsx        | 1 +
 docs/data/material/getting-started/templates/sign-in/SignIn.js   | 1 +
 docs/data/material/getting-started/templates/sign-in/SignIn.tsx  | 1 +
 4 files changed, 4 insertions(+)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
index 57d293c0490a54..bcc41e10ffabc1 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
@@ -126,6 +126,7 @@ export default function SignInCard() {
             <FormLabel htmlFor="password">Password</FormLabel>
             <Link
               component="button"
+              type="button"
               onClick={handleClickOpen}
               variant="body2"
               sx={{ alignSelf: 'baseline' }}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
index d4ad50ec2f2323..2c0e806313aa20 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
@@ -126,6 +126,7 @@ export default function SignInCard() {
             <FormLabel htmlFor="password">Password</FormLabel>
             <Link
               component="button"
+              type="button"
               onClick={handleClickOpen}
               variant="body2"
               sx={{ alignSelf: 'baseline' }}
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index 60a4646c64e3b0..973ba825a045ba 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -155,6 +155,7 @@ export default function SignIn(props) {
                 <FormLabel htmlFor="password">Password</FormLabel>
                 <Link
                   component="button"
+                  type="button"
                   onClick={handleClickOpen}
                   variant="body2"
                   sx={{ alignSelf: 'baseline' }}
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index eb9933a865b0db..d755a70c08fbf2 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -155,6 +155,7 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
                 <FormLabel htmlFor="password">Password</FormLabel>
                 <Link
                   component="button"
+                  type="button"
                   onClick={handleClickOpen}
                   variant="body2"
                   sx={{ alignSelf: 'baseline' }}

From d42e67c29a05796b7905940e53c0604e9760a8be Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 21 Sep 2024 19:30:22 +0200
Subject: [PATCH 2/4] summit the form as well to show it works

---
 .../getting-started/templates/sign-in-side/SignInCard.js    | 6 +++++-
 .../getting-started/templates/sign-in-side/SignInCard.tsx   | 6 +++++-
 .../material/getting-started/templates/sign-in/SignIn.js    | 6 +++++-
 .../material/getting-started/templates/sign-in/SignIn.tsx   | 6 +++++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
index bcc41e10ffabc1..a6af7cffd45ed0 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
@@ -50,7 +50,10 @@ export default function SignInCard() {
   };
 
   const handleSubmit = (event) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -99,6 +102,7 @@ export default function SignInCard() {
       </Typography>
       <Box
         component="form"
+        method="POST"
         onSubmit={handleSubmit}
         noValidate
         sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
index 2c0e806313aa20..97292dee2aa0e3 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
@@ -50,7 +50,10 @@ export default function SignInCard() {
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -99,6 +102,7 @@ export default function SignInCard() {
       </Typography>
       <Box
         component="form"
+        method="POST"
         onSubmit={handleSubmit}
         noValidate
         sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index 973ba825a045ba..d115ed84a0e618 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -72,7 +72,10 @@ export default function SignIn(props) {
   };
 
   const handleSubmit = (event) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -123,6 +126,7 @@ export default function SignIn(props) {
           </Typography>
           <Box
             component="form"
+            method="POST"
             onSubmit={handleSubmit}
             noValidate
             sx={{
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index d755a70c08fbf2..486b6794a7db10 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -72,7 +72,10 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -123,6 +126,7 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
           </Typography>
           <Box
             component="form"
+            method="POST"
             onSubmit={handleSubmit}
             noValidate
             sx={{

From 1233166bf915ffd9c622828bfd9f12c767c5a288 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 21 Sep 2024 21:35:21 +0200
Subject: [PATCH 3/4] moref ixes

---
 .../templates/sign-in-side/SignInCard.js             |  2 --
 .../templates/sign-in-side/SignInCard.tsx            |  2 --
 .../templates/sign-in-side/SignInSide.js             |  2 +-
 .../templates/sign-in-side/SignInSide.tsx            |  2 +-
 .../getting-started/templates/sign-in/SignIn.js      |  2 --
 .../getting-started/templates/sign-in/SignIn.tsx     |  2 --
 .../getting-started/templates/sign-up/SignUp.js      | 12 +++++++-----
 .../getting-started/templates/sign-up/SignUp.tsx     | 12 +++++++-----
 8 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
index a6af7cffd45ed0..7407bd950d6d34 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
@@ -177,7 +177,6 @@ export default function SignInCard() {
       <Divider>or</Divider>
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Google')}
@@ -186,7 +185,6 @@ export default function SignInCard() {
           Sign in with Google
         </Button>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
index 97292dee2aa0e3..6a67c0414b429c 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
@@ -177,7 +177,6 @@ export default function SignInCard() {
       <Divider>or</Divider>
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Google')}
@@ -186,7 +185,6 @@ export default function SignInCard() {
           Sign in with Google
         </Button>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
index e905157adc4a27..d10309c7c2ff57 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
@@ -70,7 +70,7 @@ export default function SignInSide() {
             sx={{
               justifyContent: 'center',
               gap: { xs: 6, sm: 12 },
-              p: 2,
+              p: '40px',
               m: 'auto',
             }}
           >
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
index ed202630073b53..b534587034be40 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -70,7 +70,7 @@ export default function SignInSide() {
             sx={{
               justifyContent: 'center',
               gap: { xs: 6, sm: 12 },
-              p: 2,
+              p: '40px',
               m: 'auto',
             }}
           >
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index d115ed84a0e618..887cd0da0749c0 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -211,7 +211,6 @@ export default function SignIn(props) {
           <Divider>or</Divider>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Google')}
@@ -220,7 +219,6 @@ export default function SignIn(props) {
               Sign in with Google
             </Button>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index 486b6794a7db10..91d2e9ba48cb50 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -211,7 +211,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
           <Divider>or</Divider>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Google')}
@@ -220,7 +219,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
               Sign in with Google
             </Button>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js
index dd1d788aab5982..22427fcf3c9ef9 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -53,12 +53,12 @@ export default function SignUp() {
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const defaultTheme = createTheme({ palette: { mode } });
   const SignUpTheme = createTheme(getSignUpTheme(mode));
+  const [nameError, setNameError] = React.useState(false);
+  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
-  const [nameError, setNameError] = React.useState(false);
-  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   // This code only runs on the client side, to determine the system color preference
   React.useEffect(() => {
     // Check if there is a preferred mode in localStorage
@@ -122,7 +122,10 @@ export default function SignUp() {
   };
 
   const handleSubmit = (event) => {
-    event.preventDefault();
+    if (nameError || emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       name: data.get('name'),
@@ -160,6 +163,7 @@ export default function SignUp() {
               </Typography>
               <Box
                 component="form"
+                method="POST"
                 onSubmit={handleSubmit}
                 sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
               >
@@ -238,7 +242,6 @@ export default function SignUp() {
               </Divider>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                 <Button
-                  type="submit"
                   fullWidth
                   variant="outlined"
                   onClick={() => alert('Sign up with Google')}
@@ -247,7 +250,6 @@ export default function SignUp() {
                   Sign up with Google
                 </Button>
                 <Button
-                  type="submit"
                   fullWidth
                   variant="outlined"
                   onClick={() => alert('Sign up with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
index ce73b97e4438c2..a76924cfbbf0fb 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -58,12 +58,12 @@ export default function SignUp() {
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const defaultTheme = createTheme({ palette: { mode } });
   const SignUpTheme = createTheme(getSignUpTheme(mode));
+  const [nameError, setNameError] = React.useState(false);
+  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
-  const [nameError, setNameError] = React.useState(false);
-  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   // This code only runs on the client side, to determine the system color preference
   React.useEffect(() => {
     // Check if there is a preferred mode in localStorage
@@ -127,7 +127,10 @@ export default function SignUp() {
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    if (nameError || emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       name: data.get('name'),
@@ -166,6 +169,7 @@ export default function SignUp() {
               </Typography>
               <Box
                 component="form"
+                method="POST"
                 onSubmit={handleSubmit}
                 sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
               >
@@ -244,7 +248,6 @@ export default function SignUp() {
               </Divider>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                 <Button
-                  type="submit"
                   fullWidth
                   variant="outlined"
                   onClick={() => alert('Sign up with Google')}
@@ -253,7 +256,6 @@ export default function SignUp() {
                   Sign up with Google
                 </Button>
                 <Button
-                  type="submit"
                   fullWidth
                   variant="outlined"
                   onClick={() => alert('Sign up with Facebook')}

From dac5b9001ce540c19d822b52fb8ea39e9f02c49a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Sep 2024 00:00:26 +0200
Subject: [PATCH 4/4] fix spacing

---
 .../templates/sign-in-side/SignInCard.js      |   1 -
 .../templates/sign-in-side/SignInCard.tsx     |   1 -
 .../templates/sign-in-side/SignInSide.js      |   2 +-
 .../templates/sign-in-side/SignInSide.tsx     |   2 +-
 .../templates/sign-in/SignIn.js               |   8 +-
 .../templates/sign-in/SignIn.tsx              |   8 +-
 .../templates/sign-up/SignUp.js               | 218 +++++++++--------
 .../templates/sign-up/SignUp.tsx              | 219 +++++++++---------
 8 files changed, 224 insertions(+), 235 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
index 7407bd950d6d34..458568bf87b837 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
@@ -102,7 +102,6 @@ export default function SignInCard() {
       </Typography>
       <Box
         component="form"
-        method="POST"
         onSubmit={handleSubmit}
         noValidate
         sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
index 6a67c0414b429c..1d7c67ae007f25 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
@@ -102,7 +102,6 @@ export default function SignInCard() {
       </Typography>
       <Box
         component="form"
-        method="POST"
         onSubmit={handleSubmit}
         noValidate
         sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
index d10309c7c2ff57..4367ff2986136e 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
@@ -70,7 +70,7 @@ export default function SignInSide() {
             sx={{
               justifyContent: 'center',
               gap: { xs: 6, sm: 12 },
-              p: '40px',
+              p: { xs: 2, sm: 4 },
               m: 'auto',
             }}
           >
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
index b534587034be40..2528450b27c228 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -70,7 +70,7 @@ export default function SignInSide() {
             sx={{
               justifyContent: 'center',
               gap: { xs: 6, sm: 12 },
-              p: '40px',
+              p: { xs: 2, sm: 4 },
               m: 'auto',
             }}
           >
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index 887cd0da0749c0..5ee1b6c65f4143 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  padding: 20,
-  marginTop: '10vh',
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   '&::before': {
     content: '""',
     display: 'block',
@@ -126,7 +129,6 @@ export default function SignIn(props) {
           </Typography>
           <Box
             component="form"
-            method="POST"
             onSubmit={handleSubmit}
             noValidate
             sx={{
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index 91d2e9ba48cb50..1da8c3e8b8a34a 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  padding: 20,
-  marginTop: '10vh',
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   '&::before': {
     content: '""',
     display: 'block',
@@ -126,7 +129,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
           </Typography>
           <Box
             component="form"
-            method="POST"
             onSubmit={handleSubmit}
             noValidate
             sx={{
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js
index 22427fcf3c9ef9..9d0afb35b8ed18 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -37,8 +37,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
-  height: '100%',
-  padding: 4,
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
@@ -145,121 +148,112 @@ export default function SignUp() {
       <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
         <CssBaseline enableColorScheme />
         <SignUpContainer direction="column" justifyContent="space-between">
-          <Stack
-            sx={{
-              justifyContent: 'center',
-              height: '100dvh',
-              p: 2,
-            }}
-          >
-            <Card variant="outlined">
-              <SitemarkIcon />
-              <Typography
-                component="h1"
-                variant="h4"
-                sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-              >
-                Sign up
-              </Typography>
-              <Box
-                component="form"
-                method="POST"
-                onSubmit={handleSubmit}
-                sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-              >
-                <FormControl>
-                  <FormLabel htmlFor="name">Full name</FormLabel>
-                  <TextField
-                    autoComplete="name"
-                    name="name"
-                    required
-                    fullWidth
-                    id="name"
-                    placeholder="Jon Snow"
-                    error={nameError}
-                    helperText={nameErrorMessage}
-                    color={nameError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="email">Email</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    id="email"
-                    placeholder="your@email.com"
-                    name="email"
-                    autoComplete="email"
-                    variant="outlined"
-                    error={emailError}
-                    helperText={emailErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="password">Password</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    name="password"
-                    placeholder="••••••"
-                    type="password"
-                    id="password"
-                    autoComplete="new-password"
-                    variant="outlined"
-                    error={passwordError}
-                    helperText={passwordErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControlLabel
-                  control={<Checkbox value="allowExtraEmails" color="primary" />}
-                  label="I want to receive updates via email."
-                />
-                <Button
-                  type="submit"
+          <Card variant="outlined">
+            <SitemarkIcon />
+            <Typography
+              component="h1"
+              variant="h4"
+              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+            >
+              Sign up
+            </Typography>
+            <Box
+              component="form"
+              onSubmit={handleSubmit}
+              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+            >
+              <FormControl>
+                <FormLabel htmlFor="name">Full name</FormLabel>
+                <TextField
+                  autoComplete="name"
+                  name="name"
+                  required
                   fullWidth
-                  variant="contained"
-                  onClick={validateInputs}
-                >
-                  Sign up
-                </Button>
-                <Typography sx={{ textAlign: 'center' }}>
-                  Already have an account?{' '}
-                  <span>
-                    <Link
-                      href="/material-ui/getting-started/templates/sign-in/"
-                      variant="body2"
-                      sx={{ alignSelf: 'center' }}
-                    >
-                      Sign in
-                    </Link>
-                  </span>
-                </Typography>
-              </Box>
-              <Divider>
-                <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-              </Divider>
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                <Button
+                  id="name"
+                  placeholder="Jon Snow"
+                  error={nameError}
+                  helperText={nameErrorMessage}
+                  color={nameError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="email">Email</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  id="email"
+                  placeholder="your@email.com"
+                  name="email"
+                  autoComplete="email"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Google')}
-                  startIcon={<GoogleIcon />}
-                >
-                  Sign up with Google
-                </Button>
-                <Button
+                  error={emailError}
+                  helperText={emailErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="password">Password</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  name="password"
+                  placeholder="••••••"
+                  type="password"
+                  id="password"
+                  autoComplete="new-password"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Facebook')}
-                  startIcon={<FacebookIcon />}
-                >
-                  Sign up with Facebook
-                </Button>
-              </Box>
-            </Card>
-          </Stack>
+                  error={passwordError}
+                  helperText={passwordErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControlLabel
+                control={<Checkbox value="allowExtraEmails" color="primary" />}
+                label="I want to receive updates via email."
+              />
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                onClick={validateInputs}
+              >
+                Sign up
+              </Button>
+              <Typography sx={{ textAlign: 'center' }}>
+                Already have an account?{' '}
+                <span>
+                  <Link
+                    href="/material-ui/getting-started/templates/sign-in/"
+                    variant="body2"
+                    sx={{ alignSelf: 'center' }}
+                  >
+                    Sign in
+                  </Link>
+                </span>
+              </Typography>
+            </Box>
+            <Divider>
+              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+            </Divider>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Google')}
+                startIcon={<GoogleIcon />}
+              >
+                Sign up with Google
+              </Button>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Facebook')}
+                startIcon={<FacebookIcon />}
+              >
+                Sign up with Facebook
+              </Button>
+            </Box>
+          </Card>
         </SignUpContainer>
       </ThemeProvider>
     </TemplateFrame>
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
index a76924cfbbf0fb..a375bae9d1f15f 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -42,8 +42,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
-  height: '100%',
-  padding: 4,
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
@@ -149,123 +152,113 @@ export default function SignUp() {
     >
       <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
         <CssBaseline enableColorScheme />
-
         <SignUpContainer direction="column" justifyContent="space-between">
-          <Stack
-            sx={{
-              justifyContent: 'center',
-              height: '100dvh',
-              p: 2,
-            }}
-          >
-            <Card variant="outlined">
-              <SitemarkIcon />
-              <Typography
-                component="h1"
-                variant="h4"
-                sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-              >
-                Sign up
-              </Typography>
-              <Box
-                component="form"
-                method="POST"
-                onSubmit={handleSubmit}
-                sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-              >
-                <FormControl>
-                  <FormLabel htmlFor="name">Full name</FormLabel>
-                  <TextField
-                    autoComplete="name"
-                    name="name"
-                    required
-                    fullWidth
-                    id="name"
-                    placeholder="Jon Snow"
-                    error={nameError}
-                    helperText={nameErrorMessage}
-                    color={nameError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="email">Email</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    id="email"
-                    placeholder="your@email.com"
-                    name="email"
-                    autoComplete="email"
-                    variant="outlined"
-                    error={emailError}
-                    helperText={emailErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="password">Password</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    name="password"
-                    placeholder="••••••"
-                    type="password"
-                    id="password"
-                    autoComplete="new-password"
-                    variant="outlined"
-                    error={passwordError}
-                    helperText={passwordErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControlLabel
-                  control={<Checkbox value="allowExtraEmails" color="primary" />}
-                  label="I want to receive updates via email."
-                />
-                <Button
-                  type="submit"
+          <Card variant="outlined">
+            <SitemarkIcon />
+            <Typography
+              component="h1"
+              variant="h4"
+              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+            >
+              Sign up
+            </Typography>
+            <Box
+              component="form"
+              onSubmit={handleSubmit}
+              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+            >
+              <FormControl>
+                <FormLabel htmlFor="name">Full name</FormLabel>
+                <TextField
+                  autoComplete="name"
+                  name="name"
+                  required
                   fullWidth
-                  variant="contained"
-                  onClick={validateInputs}
-                >
-                  Sign up
-                </Button>
-                <Typography sx={{ textAlign: 'center' }}>
-                  Already have an account?{' '}
-                  <span>
-                    <Link
-                      href="/material-ui/getting-started/templates/sign-in/"
-                      variant="body2"
-                      sx={{ alignSelf: 'center' }}
-                    >
-                      Sign in
-                    </Link>
-                  </span>
-                </Typography>
-              </Box>
-              <Divider>
-                <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-              </Divider>
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                <Button
+                  id="name"
+                  placeholder="Jon Snow"
+                  error={nameError}
+                  helperText={nameErrorMessage}
+                  color={nameError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="email">Email</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  id="email"
+                  placeholder="your@email.com"
+                  name="email"
+                  autoComplete="email"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Google')}
-                  startIcon={<GoogleIcon />}
-                >
-                  Sign up with Google
-                </Button>
-                <Button
+                  error={emailError}
+                  helperText={emailErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="password">Password</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  name="password"
+                  placeholder="••••••"
+                  type="password"
+                  id="password"
+                  autoComplete="new-password"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Facebook')}
-                  startIcon={<FacebookIcon />}
-                >
-                  Sign up with Facebook
-                </Button>
-              </Box>
-            </Card>
-          </Stack>
+                  error={passwordError}
+                  helperText={passwordErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControlLabel
+                control={<Checkbox value="allowExtraEmails" color="primary" />}
+                label="I want to receive updates via email."
+              />
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                onClick={validateInputs}
+              >
+                Sign up
+              </Button>
+              <Typography sx={{ textAlign: 'center' }}>
+                Already have an account?{' '}
+                <span>
+                  <Link
+                    href="/material-ui/getting-started/templates/sign-in/"
+                    variant="body2"
+                    sx={{ alignSelf: 'center' }}
+                  >
+                    Sign in
+                  </Link>
+                </span>
+              </Typography>
+            </Box>
+            <Divider>
+              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+            </Divider>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Google')}
+                startIcon={<GoogleIcon />}
+              >
+                Sign up with Google
+              </Button>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Facebook')}
+                startIcon={<FacebookIcon />}
+              >
+                Sign up with Facebook
+              </Button>
+            </Box>
+          </Card>
         </SignUpContainer>
       </ThemeProvider>
     </TemplateFrame>