Fix incorrect alignment on 2FA boxes due to incorrect TW breakpoints (#3914)

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -16,11 +16,11 @@ const Container = styled.div`
   & > div {
     ${tw`w-full`};
 
-        ${breakpoint('md')`
+    ${breakpoint('sm')`
       width: calc(50% - 1rem);
     `}
 
-        ${breakpoint('xl')`
+    ${breakpoint('md')`
       ${tw`w-auto flex-1`};
     `}
   }
@@ -36,21 +36,23 @@ export default () => {
                 Your account must have two-factor authentication enabled in order to continue.
             </MessageBox>
             }
-            <Container css={[ tw`mb-10`, state?.twoFactorRedirect ? tw`mt-4` : tw`mt-10` ]}>
+
+            <Container css={[ tw`lg:grid lg:grid-cols-3 mb-10`, state?.twoFactorRedirect ? tw`mt-4` : tw`mt-10` ]}>
                 <ContentBox title={'Update Password'} showFlashes={'account:password'}>
                     <UpdatePasswordForm/>
                 </ContentBox>
                 <ContentBox
-                    css={tw`mt-8 md:mt-0 md:ml-8`}
+                    css={tw`mt-8 sm:mt-0 sm:ml-8`}
                     title={'Update Email Address'}
                     showFlashes={'account:email'}
                 >
                     <UpdateEmailAddressForm/>
                 </ContentBox>
-                <ContentBox css={tw`lg:ml-8 mt-8 lg:mt-0`} title={'Configure Two Factor'}>
+                <ContentBox css={tw`md:ml-8 mt-8 md:mt-0`} title={'Configure Two Factor'}>
                     <ConfigureTwoFactorForm/>
                 </ContentBox>
             </Container>
+
         </PageContentBlock>
     );
 };

resources/scripts/theme.ts

@@ -3,8 +3,8 @@ import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoi
 type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Breakpoints>({
     xs: 0,
-    sm: 576,
+    sm: 640,
     md: 768,
-    lg: 992,
-    xl: 1200,
+    lg: 1024,
+    xl: 1280,
 });