Merge branch 'modal' into dev

src/App.tsx

@@ -191,7 +191,7 @@ export default function App() {
         <Routes>
           <Route path="/signin" element={<SigninDialog />} />
           <Route path="/signup" element={<SignupDialog />} />
-          <Route path="//recover" element={<Restore />} />
+          <Route path="/recover" element={<Restore />} />
           <Route path="/changepwd" element={<RecoverPassword />} />
           <Route path="/changepwd/expired" element={<OutdatedLink />} />
         </Routes>

src/pages/auth/RecoverPassword.tsx

@@ -42,6 +42,8 @@ export default function RecoverPassword() {
   const user = useUserStore((state) => state.user);
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(450));
+
   const navigate = useNavigate();
   const location = useLocation();
   const formik = useFormik<Values>({
@@ -93,8 +95,11 @@ export default function RecoverPassword() {
       onClose={handleClose}
       PaperProps={{
         sx: {
-          width: "600px",
+          width: isMobile ? "100%" : "600px",
-          maxWidth: "600px",
+          maxWidth: isMobile ? "100%" : "600px",
+          margin: isMobile ? "0" : "32px",
+          maxHeight: isMobile ? "100%" : "-moz-initial",
+          height: isMobile ? "100%" : "-moz-initial",
         },
       }}
       slotProps={{
@@ -110,6 +115,7 @@ export default function RecoverPassword() {
         onSubmit={formik.handleSubmit}
         noValidate
         sx={{
+          height: isMobile ? "100%" : "-moz-initial",
           position: "relative",
           backgroundColor: "white",
           display: "flex",

src/pages/auth/Restore.tsx

@@ -37,6 +37,8 @@ export const Restore: FC = () => {
   const navigate = useNavigate();
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(450));
+
   const location = useLocation();
 
   const formik = useFormik<Values>({
@@ -68,8 +70,11 @@ export const Restore: FC = () => {
       onClose={handleClose}
       PaperProps={{
         sx: {
-          width: "600px",
+          width: isMobile ? "100%" : "600px",
-          maxWidth: "600px",
+          maxWidth: isMobile ? "100%" : "600px",
+          margin: isMobile ? "0" : "32px",
+          maxHeight: isMobile ? "100%" : "-moz-initial",
+          height: isMobile ? "100%" : "-moz-initial",
         },
       }}
       slotProps={{
@@ -85,6 +90,7 @@ export const Restore: FC = () => {
         onSubmit={formik.handleSubmit}
         noValidate
         sx={{
+          height: isMobile ? "100%" : "-moz-initial",
           position: "relative",
           backgroundColor: "white",
           display: "flex",

src/pages/auth/Signin.tsx

@@ -42,6 +42,7 @@ export default function SigninDialog() {
   const user = useUserStore((state) => state.user);
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(450));
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -84,8 +85,11 @@ export default function SigninDialog() {
       onClose={handleClose}
       PaperProps={{
         sx: {
-          width: "600px",
+          width: isMobile ? "100%" : "600px",
-          maxWidth: "600px",
+          maxWidth: isMobile ? "100%" : "600px",
+          margin: isMobile ? "0" : "32px",
+          maxHeight: isMobile ? "100%" : "-moz-initial",
+          height: isMobile ? "100%" : "-moz-initial",
         },
       }}
       slotProps={{
@@ -101,6 +105,7 @@ export default function SigninDialog() {
         onSubmit={formik.handleSubmit}
         noValidate
         sx={{
+          height: isMobile ? "100%" : "-moz-initial",
           position: "relative",
           backgroundColor: "white",
           display: "flex",

src/pages/auth/Signup.tsx

@@ -53,6 +53,8 @@ export default function SignupDialog() {
   const { user } = useUserStore((state) => state);
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(450));
+
   const location = useLocation();
 
   const navigate = useNavigate();
@@ -96,8 +98,11 @@ export default function SignupDialog() {
       onClose={handleClose}
       PaperProps={{
         sx: {
-          width: "600px",
+          width: isMobile ? "100%" : "600px",
-          maxWidth: "600px",
+          maxWidth: isMobile ? "100%" : "600px",
+          margin: isMobile ? "0" : "32px",
+          maxHeight: isMobile ? "100%" : "-moz-initial",
+          height: isMobile ? "100%" : "-moz-initial",
         },
       }}
       slotProps={{
@@ -113,6 +118,7 @@ export default function SignupDialog() {
         onSubmit={formik.handleSubmit}
         noValidate
         sx={{
+          height: isMobile ? "100%" : "-moz-initial",
           position: "relative",
           backgroundColor: "white",
           display: "flex",