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;