Merge pull request #859 from blockscout/mob-tabs

change padding

ui/address/AddressTokens.pw.tsx

 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { withName } from 'mocks/address/address';
@@ -56,7 +56,7 @@ const test = base.extend({
   },
 });
 
-test('erc20 +@mobile +@dark-mode', async({ mount }) => {
+test('erc20 +@dark-mode', async({ mount }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -75,7 +75,7 @@ test('erc20 +@mobile +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('erc721 +@mobile +@dark-mode', async({ mount }) => {
+test('erc721 +@dark-mode', async({ mount }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_erc721' },
@@ -94,7 +94,7 @@ test('erc721 +@mobile +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('erc1155 +@mobile +@dark-mode', async({ mount }) => {
+test('erc1155 +@dark-mode', async({ mount }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_erc1155' },
@@ -112,3 +112,64 @@ test('erc1155 +@mobile +@dark-mode', async({ mount }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('erc20', async({ mount }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
+        isReady: true,
+      },
+    };
+
+    const component = await mount(
+      <TestApp>
+        <Box h={{ base: '134px', lg: 6 }}/>
+        <AddressTokens/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('erc721', async({ mount }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash: ADDRESS_HASH, tab: 'tokens_erc721' },
+        isReady: true,
+      },
+    };
+
+    const component = await mount(
+      <TestApp>
+        <Box h={{ base: '134px', lg: 6 }}/>
+        <AddressTokens/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('erc1155', async({ mount }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash: ADDRESS_HASH, tab: 'tokens_erc1155' },
+        isReady: true,
+      },
+    };
+
+    const component = await mount(
+      <TestApp>
+        <Box h={{ base: '134px', lg: 6 }}/>
+        <AddressTokens/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/pages/Blocks.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as textAdMock from 'mocks/ad/textAd';
@@ -40,7 +40,7 @@ test.beforeEach(async({ page }) => {
   });
 });
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+test('base view +@dark-mode', async({ mount, page }) => {
   await page.route(BLOCKS_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(blockMock.baseListResponse),
@@ -61,6 +61,30 @@ test('base view +@mobile +@dark-mode', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test(' base view', async({ mount, page }) => {
+    await page.route(BLOCKS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(blockMock.baseListResponse),
+    }));
+    await page.route(STATS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <Blocks/>
+      </TestApp>,
+      { hooksConfig },
+    );
+    await page.waitForResponse(BLOCKS_API_URL);
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
 test('new item from socket', async({ mount, page, createSocket }) => {
   await page.route(BLOCKS_API_URL, (route) => route.fulfill({
     status: 200,

ui/shared/Tabs/TabsWithScroll.tsx

@@ -106,6 +106,8 @@ const TabsWithScroll = ({
     >
       <TabList
         marginBottom={{ base: 6, lg: 8 }}
+        mx={{ base: '-16px', lg: 'unset' }}
+        px={{ base: '16px', lg: 'unset' }}
         flexWrap="nowrap"
         whiteSpace="nowrap"
         ref={ listRef }