fix paddings

playwright/utils/config.ts

@@ -4,6 +4,7 @@ export const viewport = {
   mobile: devices['iPhone 13 Pro'].viewport,
   md: { width: 1001, height: 800 },
   xl: { width: 1600, height: 1000 },
+  xxl: { width: 1920, height: 1200 },
 };
 
 export const maskColor = '#4299E1'; // blue.400

theme/foundations/breakpoints.ts

@@ -4,8 +4,9 @@ const breakpoints = {
   //   md: '768px',
   lg: '1000px',
   xl: '1440px',
+  '2xl': '1920px',
   // these breakpoint are needed just to make others work
-  '2xl': '3000px',
+  '3xl': '3000px',
 };
 
 export default breakpoints;

ui/shared/layout/Layout.pw.tsx

@@ -18,8 +18,8 @@ test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test.describe('xl screen', () => {
-  test.use({ viewport: pwConfig.viewport.xl });
+test.describe('xxl screen', () => {
+  test.use({ viewport: pwConfig.viewport.xxl });
 
   test('vertical navigation', async({ render }) => {
     const component = await render(<Layout>Page Content</Layout>);

ui/shared/layout/components/MainColumn.tsx

@@ -16,6 +16,7 @@ const MainColumn = ({ children, className }: Props) => {
       flexGrow={ 1 }
       w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }}
       paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }}
+      paddingRight={{ '2xl': 6 }}
       paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height
       paddingBottom={ 8 }
     >

ui/snippets/footer/Footer.tsx

@@ -162,7 +162,7 @@ const Footer = () => {
   };
 
   const contentProps: GridProps = {
-    px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 },
+    px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12, '2xl': 6 },
     py: { base: 4, lg: 8 },
     gridTemplateColumns: { base: '1fr', lg: 'minmax(auto, 470px) 1fr' },
     columnGap: { lg: '32px', xl: '100px' },