Change max width of page content

configs/app/ui.ts

@@ -88,6 +88,7 @@ const UI = Object.freeze({
   colorTheme: {
     'default': defaultColorTheme,
   },
+  maxContentWidth: getEnvValue('NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED') === 'false' ? false : true,
 });
 
 export default UI;

deploy/tools/envs-validator/schema.ts

@@ -634,6 +634,7 @@ const schema = yup
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
     NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),
     NEXT_PUBLIC_COLOR_THEME_DEFAULT: yup.string().oneOf(COLOR_THEME_IDS),
+    NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED: yup.boolean(),
 
     // 5. Features configuration
     NEXT_PUBLIC_API_SPEC_URL: yup

deploy/tools/envs-validator/test/.env.base

@@ -32,6 +32,7 @@ NEXT_PUBLIC_FOOTER_LINKS=https://example.com
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=false
+NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED=false
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='#fff'
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgb(255, 145, 0)'

docs/ENVS.md

@@ -286,6 +286,7 @@ Settings for meta tags, OG tags and SEO
 | NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` | v1.17.0+ |
 | NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | v1.13.0+ |
 | NEXT_PUBLIC_COLOR_THEME_DEFAULT | `'light' \| 'dim' \| 'midnight' \| 'dark'` | Preferred color theme of the app | - | - | `midnight` | v1.30.0+ |
+| NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED | `boolean` | Set to `true` to restrict the page content width on extra-large screens. | - | `true` | `false` | v1.34.1+ |
 
 #### Network explorer configuration properties
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

playwright/ContentWrapper.tsx

-import { Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  children?: React.ReactNode;
-}
-
-const ContentWrapper = ({ children }: Props) => {
-  const bgColor = useColorModeValue('white', 'black');
-  return <Box bgColor={ bgColor }>{ children }</Box>;
-};
-
-export default React.memo(ContentWrapper);

playwright/fixtures/render.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 
 import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 
-import ContentWrapper from 'playwright/ContentWrapper';
 import type { Props as TestAppProps } from 'playwright/TestApp';
 import TestApp from 'playwright/TestApp';
 
@@ -28,7 +27,7 @@ export type RenderFixture = (component: JSX.Element, options?: Options, props?:
 const fixture: TestFixture<RenderFixture, { mount: Mount }> = async({ mount }, use) => {
   await use((component, options, props) => {
     return mount(
-      <TestApp { ...props }><ContentWrapper>{ component }</ContentWrapper></TestApp>,
+      <TestApp { ...props }>{ component }</TestApp>,
       options,
     );
   });

theme/global.ts

@@ -7,7 +7,7 @@ import getDefaultTransitionProps from './utils/getDefaultTransitionProps';
 
 const global = (props: StyleFunctionProps) => ({
   body: {
-    bg: mode('gray.100', '#3A4957')(props),
+    bg: mode('white', 'black')(props),
     ...getDefaultTransitionProps(),
     '-webkit-tap-highlight-color': 'transparent',
     'font-variant-ligatures': 'no-contextual',

ui/shared/layout/components/Container.tsx

 import { Box, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import config from 'configs/app';
-
-import { CONTENT_MAX_WIDTH } from '../utils';
-
 interface Props {
   children: React.ReactNode;
   className?: string;
@@ -17,7 +13,6 @@ const Container = ({ children, className }: Props) => {
     <Box
       className={ className }
       minWidth={{ base: '100vw', lg: 'fit-content' }}
-      maxW={ config.UI.navigation.layout === 'horizontal' ? undefined : `${ CONTENT_MAX_WIDTH }px` }
       m="0 auto"
       bgColor={ bgColor }
     >

ui/shared/layout/utils.ts

 import config from 'configs/app';
 
-export const CONTENT_MAX_WIDTH = config.UI.navigation.layout === 'horizontal' ? 1440 : 1512;
+const maxWidthVerticalNavigation = config.UI.maxContentWidth ? 1_920 : 10_000;
+const maxWidthHorizontalNavigation = config.UI.maxContentWidth ? 1_440 : 10_000;
+
+export const CONTENT_MAX_WIDTH = config.UI.navigation.layout === 'horizontal' ? maxWidthHorizontalNavigation : maxWidthVerticalNavigation;