Fix authentication page on mobile devices

resources/scripts/components/auth/LoginContainer.tsx

@@ -32,8 +32,6 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
         handleSubmit(e);
     };
 
-    console.log(values.recaptchaData);
-
     return (
         <React.Fragment>
             {ref.current && ref.current.render()}

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,21 +1,40 @@
 import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Form } from 'formik';
+import { breakpoint } from 'styled-components-breakpoint';
 
 type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
 
+const LoginContainer = styled.div`
+    ${tw`bg-white shadow-lg rounded-lg p-6 mx-1`};
+
+    ${breakpoint('sm')`
+        ${tw`w-4/5 mx-auto`}
+    `};
+
+    ${breakpoint('md')`
+        ${tw`flex p-10`}
+    `};
+
+    ${breakpoint('lg')`
+        ${tw`w-3/5`}
+    `};
+
+    ${breakpoint('xl')`
+        ${tw`w-full`}
+        max-width: 660px;
+    `};
+`;
+
 export default forwardRef<any, Props>(({ className, ...props }, ref) => (
-    <form
-        ref={ref}
-        className={'flex items-center justify-center login-box'}
-        {...props}
-        style={{
-            paddingLeft: 0,
-        }}
-    >
-        <div className={'flex-none select-none'}>
-            <img src={'/assets/pterodactyl.svg'} className={'w-64'}/>
-        </div>
-        <div className={'flex-1'}>
-            {props.children}
-        </div>
-    </form>
+    <Form {...props}>
+        <LoginContainer>
+            <div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
+                <img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
+            </div>
+            <div className={'flex-1'}>
+                {props.children}
+            </div>
+        </LoginContainer>
+    </Form>
 ));