Limit page content width (#2197)

* limit content width for horizontal menu layout

* limit content width for vertical menu layout

* limit amout of tabs in routed tabs skeleton

* fix width of error screen

* add NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL L2 review envs

* add tests

* fixes

* fix tests

* move content wrapper to render fixture

* update screenshots and fix tests

deploy/values/review-l2/values.yaml.gotmpl

@@ -67,6 +67,7 @@ frontend:
     NEXT_PUBLIC_METADATA_SERVICE_API_HOST: https://metadata.services.blockscout.com
     NEXT_PUBLIC_ROLLUP_TYPE: optimistic
     NEXT_PUBLIC_ROLLUP_L1_BASE_URL: https://eth.blockscout.com
+    NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: true
     NEXT_PUBLIC_NAVIGATION_LAYOUT: horizontal

pages/_app.tsx

-import type { ChakraProps } from '@chakra-ui/react';
+import { type ChakraProps } from '@chakra-ui/react';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import * as Sentry from '@sentry/react';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -19,6 +19,7 @@ import useLoadFeatures from 'lib/growthbook/useLoadFeatures';
 import useNotifyOnNavigation from 'lib/hooks/useNotifyOnNavigation';
 import { SocketProvider } from 'lib/socket/context';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
+import AppErrorGlobalContainer from 'ui/shared/AppError/AppErrorGlobalContainer';
 import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 import Layout from 'ui/shared/layout/Layout';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
@@ -38,7 +39,7 @@ const ERROR_SCREEN_STYLES: ChakraProps = {
   justifyContent: 'center',
   width: 'fit-content',
   maxW: '800px',
-  margin: '0 auto',
+  margin: { base: '0 auto', lg: '0 auto' },
   p: { base: 4, lg: 0 },
 };
 
@@ -60,6 +61,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       <AppErrorBoundary
         { ...ERROR_SCREEN_STYLES }
         onError={ handleError }
+        Container={ AppErrorGlobalContainer }
       >
         <Web3ModalProvider>
           <AppContextProvider pageProps={ pageProps }>

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,6 +6,7 @@ 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';
 
@@ -27,7 +28,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 }>{ component }</TestApp>,
+      <TestApp { ...props }><ContentWrapper>{ component }</ContentWrapper></TestApp>,
       options,
     );
   });

theme/global.ts

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

ui/pages/NameDomain.pw.tsx

@@ -7,11 +7,13 @@ import { test, expect } from 'playwright/lib';
 
 import NameDomain from './NameDomain';
 
-test('details tab', async({ render, mockTextAd, mockApiResponse }) => {
+test('details tab', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
   await mockTextAd();
   await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
     pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
   });
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
+
   const component = await render(
     <NameDomain/>,
     { hooksConfig: {
@@ -24,7 +26,7 @@ test('details tab', async({ render, mockTextAd, mockApiResponse }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
   await mockTextAd();
   await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
     pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
@@ -37,6 +39,7 @@ test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
   }, {
     pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
   });
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
   const component = await render(
     <NameDomain/>,
     { hooksConfig: {

ui/shared/AppError/AppErrorBoundary.tsx

@@ -9,13 +9,18 @@ interface Props {
   className?: string;
   children: React.ReactNode;
   onError?: (error: Error) => void;
+  Container?: React.FC<{ children: React.ReactNode }>;
 }
 
-const AppErrorBoundary = ({ className, children, onError }: Props) => {
+const AppErrorBoundary = ({ className, children, onError, Container }: Props) => {
 
   const renderErrorScreen = React.useCallback((error?: Error) => {
-    return <AppError error={ error } className={ className }/>;
-  }, [ className ]);
+    const content = <AppError error={ error } className={ className }/>;
+    if (Container) {
+      return <Container>{ content }</Container>;
+    }
+    return content;
+  }, [ className, Container ]);
 
   return (
     <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ onError }>

ui/shared/AppError/AppErrorGlobalContainer.tsx

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

ui/shared/Tabs/AdaptiveTabsList.tsx

@@ -80,7 +80,7 @@ const AdaptiveTabsList = (props: Props) => {
           props.tabListProps)
       }
     >
-      { tabsList.map((tab, index) => {
+      { tabsList.slice(0, props.isLoading ? 5 : Infinity).map((tab, index) => {
         if (!tab.id) {
           if (props.isLoading) {
             return null;

ui/shared/Tabs/TabsWithScroll.tsx

@@ -99,7 +99,7 @@ const TabsWithScroll = ({
         //    - tabs list is changed when API data is loaded
         // is to do full re-render of the tabs list
         // so we use screenWidth + tabIds as a key for the TabsList component
-        key={ screenWidth + '_' + tabsList.map((tab) => tab.id).join(':') }
+        key={ isLoading + '_' + screenWidth + '_' + tabsList.map((tab) => tab.id).join(':') }
         tabs={ tabs }
         tabListProps={ tabListProps }
         rightSlot={ rightSlot }

ui/shared/entities/address/AddressEntity.tsx

@@ -160,6 +160,7 @@ const AddressEntry = (props: EntityProps) => {
       onMouseEnter={ context?.onMouseEnter }
       onMouseLeave={ context?.onMouseLeave }
       position="relative"
+      zIndex={ 0 }
     >
       <Icon { ...partsProps } color={ props.iconColor }/>
       <Link { ...linkProps }>

ui/shared/layout/Layout.pw.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { indexingStatus } from 'mocks/stats/index';
 import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Layout from './Layout';
 
@@ -16,3 +17,20 @@ test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => {
   const component = await render(<Layout>Page Content</Layout>);
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('xl screen', () => {
+  test.use({ viewport: pwConfig.viewport.xl });
+
+  test('vertical navigation', async({ render }) => {
+    const component = await render(<Layout>Page Content</Layout>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('horizontal navigation', async({ render, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NAVIGATION_LAYOUT', 'horizontal' ],
+    ]);
+    const component = await render(<Layout>Page Content</Layout>);
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/shared/layout/components/Container.tsx

-import { Box, chakra } from '@chakra-ui/react';
+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;
 }
 
 const Container = ({ children, className }: Props) => {
+  const bgColor = useColorModeValue('white', 'black');
+
   return (
-    <Box className={ className } minWidth={{ base: '100vw', lg: 'fit-content' }}>
+    <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 }
+    >
       { children }
     </Box>
   );

ui/shared/layout/components/MainArea.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 
 import config from 'configs/app';
 
+import { CONTENT_MAX_WIDTH } from '../utils';
+
 interface Props {
   children: React.ReactNode;
   className?: string;
@@ -16,6 +18,8 @@ const MainArea = ({ children, className }: Props) => {
     <Flex
       className={ className }
       w="100%"
+      maxW={ `${ CONTENT_MAX_WIDTH }px` }
+      m="0 auto"
       minH={{
         base: `calc(100vh - ${ TOP_BAR_HEIGHT }px)`,
         lg: `calc(100vh - ${ TOP_BAR_HEIGHT + HORIZONTAL_NAV_BAR_HEIGHT }px)`,

ui/shared/layout/components/MainColumn.tsx

@@ -14,7 +14,7 @@ const MainColumn = ({ children, className }: Props) => {
       className={ className }
       flexDir="column"
       flexGrow={ 1 }
-      w={{ base: '100%', lg: 'auto' }}
+      w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }}
       paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }}
       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;

ui/snippets/footer/Footer.tsx

-import type { GridProps } from '@chakra-ui/react';
+import type { GridProps, HTMLChakraProps } from '@chakra-ui/react';
 import { Box, Grid, Flex, Text, Link, VStack, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
@@ -12,6 +12,7 @@ import useFetch from 'lib/hooks/useFetch';
 import useIssueUrl from 'lib/hooks/useIssueUrl';
 import { copy } from 'lib/html-entities';
 import IconSvg from 'ui/shared/IconSvg';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import FooterLinkItem from './FooterLinkItem';
@@ -154,19 +155,25 @@ const Footer = () => {
     );
   }, [ apiVersionUrl, backendVersionData?.backend_version, frontendLink, logoColor ]);
 
-  const containerProps: GridProps = {
+  const containerProps: HTMLChakraProps<'div'> = {
     as: 'footer',
+    borderTopWidth: '1px',
+    borderTopColor: 'solid',
+  };
+
+  const contentProps: GridProps = {
     px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 },
     py: { base: 4, lg: 8 },
-    borderTop: '1px solid',
-    borderColor: 'divider',
     gridTemplateColumns: { base: '1fr', lg: 'minmax(auto, 470px) 1fr' },
     columnGap: { lg: '32px', xl: '100px' },
+    maxW: `${ CONTENT_MAX_WIDTH }px`,
+    m: '0 auto',
   };
 
   if (config.UI.footer.links) {
     return (
-      <Grid { ...containerProps }>
+      <Box { ...containerProps }>
+        <Grid { ...contentProps }>
           <div>
             { renderNetworkInfo() }
             { renderProjectInfo() }
@@ -199,12 +206,14 @@ const Footer = () => {
             }
           </Grid>
         </Grid>
+      </Box>
     );
   }
 
   return (
+    <Box { ...containerProps }>
       <Grid
-      { ...containerProps }
+        { ...contentProps }
         gridTemplateAreas={{
           lg: `
           "network links-top"
@@ -237,6 +246,7 @@ const Footer = () => {
           { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
         </Grid>
       </Grid>
+    </Box>
   );
 };
 

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

-import { chakra, Flex } from '@chakra-ui/react';
+import { Box, chakra, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
@@ -15,13 +16,14 @@ const NavigationDesktop = () => {
   const { mainNavItems } = useNavItems();
 
   return (
+    <Box borderColor="divider" borderBottomWidth="1px">
       <Flex
         display={{ base: 'none', lg: 'flex' }}
         alignItems="center"
         px={ 6 }
         py={ 2 }
-      borderBottomWidth="1px"
-      borderColor="divider"
+        maxW={ `${ CONTENT_MAX_WIDTH }px` }
+        m="0 auto"
       >
         <NetworkLogo isCollapsed={ false } w={{ lg: 'auto' }} maxW="120px"/>
         <TestnetBadge ml={ 3 }/>
@@ -39,6 +41,7 @@ const NavigationDesktop = () => {
         { config.features.account.isEnabled && <ProfileMenuDesktop buttonBoxSize="32px"/> }
         { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop size="sm"/> }
       </Flex>
+    </Box>
   );
 };
 

ui/snippets/topBar/TopBar.tsx

@@ -2,6 +2,7 @@ import { Flex, Divider, useColorModeValue, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 
 import DeFiDropdown from './DeFiDropdown';
 import NetworkMenu from './NetworkMenu';
@@ -12,10 +13,12 @@ const TopBar = () => {
   const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
 
   return (
+    <Box bgColor={ bgColor }>
       <Flex
         py={ 2 }
         px={{ base: 3, lg: 6 }}
-      bgColor={ bgColor }
+        maxW={ `${ CONTENT_MAX_WIDTH }px` }
+        m="0 auto"
         justifyContent="space-between"
         alignItems="center"
       >
@@ -36,6 +39,7 @@ const TopBar = () => {
           ) }
         </Flex>
       </Flex>
+    </Box>
   );
 };