Merge pull request #2247 from blockscout/tom2drum/content-max-width

Change max width of page content

configs/app/ui.ts

@@ -109,6 +109,7 @@ const UI = Object.freeze({
     heading: parseEnvJson<FontFamily>(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_HEADING')),
     body: parseEnvJson<FontFamily>(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_BODY')),
   },
+  maxContentWidth: getEnvValue('NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED') === 'false' ? false : true,
 });
 
 export default UI;

deploy/tools/envs-validator/schema.ts

@@ -696,6 +696,7 @@ const schema = yup
         const isUndefined = data === undefined;
         return isUndefined || fontFamilySchema.isValidSync(data);
       }),
+    NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED: yup.boolean(),
 
     // 5. Features configuration
     NEXT_PUBLIC_API_SPEC_URL: yup

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

@@ -34,6 +34,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_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','current_epoch']
 NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='#fff'

docs/ENVS.md

@@ -301,6 +301,7 @@ Settings for meta tags, OG tags and SEO
 | NEXT_PUBLIC_COLOR_THEME_DEFAULT | `'light' \| 'dim' \| 'midnight' \| 'dark'` | Preferred color theme of the app | - | - | `midnight` | v1.30.0+ |
 | NEXT_PUBLIC_FONT_FAMILY_HEADING | `FontFamily`, see full description [below](#font-family-configuration-properties) | Special typeface to use in page headings (`<h1>`, `<h2>`, etc.) | - | - | `{'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}` | v1.35.0+ |
 | NEXT_PUBLIC_FONT_FAMILY_BODY | `FontFamily`, see full description [below](#font-family-configuration-properties) | Main typeface to use in page content elements. | - | - | `{'name':'Raleway','url':'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'}` | v1.35.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
 

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,
     );
   });

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;

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/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/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/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/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;

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' },