Make login and sign up form responsive

web/src/components/AvatarBox.jsx

@@ -1,22 +1,23 @@
 import * as React from "react";
-import { Avatar, Box } from "@mui/material";
+import { Avatar, Box, styled } from "@mui/material";
 import logo from "../img/ntfy-filled.svg";
 
+const AvatarBoxContainer = styled(Box)`
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  height: 100dvh;
+  max-width: min(400px, 90dvw);
+  margin: auto;
+`;
 const AvatarBox = (props) => (
-  <Box
-    sx={{
-      display: "flex",
-      flexGrow: 1,
-      justifyContent: "center",
-      flexDirection: "column",
-      alignContent: "center",
-      alignItems: "center",
-      height: "100vh",
-    }}
-  >
+  <AvatarBoxContainer>
     <Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" />
     {props.children}
-  </Box>
+  </AvatarBoxContainer>
 );
 
 export default AvatarBox;

web/src/components/Login.jsx

@@ -45,7 +45,7 @@ const Login = () => {
   return (
     <AvatarBox>
       <Typography sx={{ typography: "h6" }}>{t("login_title")}</Typography>
-      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}>
+      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
         <TextField
           margin="dense"
           required

web/src/components/Signup.jsx

@@ -52,7 +52,7 @@ const Signup = () => {
   return (
     <AvatarBox>
       <Typography sx={{ typography: "h6" }}>{t("signup_title")}</Typography>
-      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}>
+      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
         <TextField
           margin="dense"
           required