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

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -11,19 +11,19 @@ import MessageBox from '@/components/MessageBox';
 import { useLocation } from 'react-router-dom';
 
 const Container = styled.div`
-    ${tw`flex flex-wrap`};
+  ${tw`flex flex-wrap`};
 
-    & > div {
-        ${tw`w-full`};
+  & > div {
+    ${tw`w-full`};
 
-        ${breakpoint('md')`
-            width: calc(50% - 1rem);
-        `}
+    ${breakpoint('sm')`
+      width: calc(50% - 1rem);
+    `}
 
-        ${breakpoint('xl')`
-            ${tw`w-auto flex-1`};
-        `}
-    }
+    ${breakpoint('md')`
+      ${tw`w-auto flex-1`};
+    `}
+  }
 `;
 
 export default () => {
@@ -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,
 });