Fix authentication page on mobile devices

resources/scripts/TransitionRouter.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
 import { Route } from 'react-router';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import styled from 'styled-components';
+import { breakpoint } from 'styled-components-breakpoint';
 
 type Props = Readonly<{
     children: React.ReactNode;
 }>;
 
+const ContentContainer = styled.div`
+    max-width: 1200px;
+    ${tw`mx-4`};
+
+    ${breakpoint('xl')`
+        ${tw`mx-auto`};
+    `};
+`;
+
 export default ({ children }: Props) => (
     <Route
         render={({ location }) => (
             <TransitionGroup className={'route-transition-group'}>
                 <CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
                     <section>
-                        {children}
-                        <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
+                        <ContentContainer>
+                            {children}
+                        </ContentContainer>
+                        <ContentContainer className={'mb-4'}>
                             <p className={'text-right text-neutral-500 text-xs'}>
                                 &copy; 2015 - 2019&nbsp;
                                 <a
@@ -25,7 +38,7 @@ export default ({ children }: Props) => (
                                     Pterodactyl Software
                                 </a>
                             </p>
-                        </div>
+                        </ContentContainer>
                     </section>
                 </CSSTransition>
             </TransitionGroup>