fix layout

ui/pages/Accounts.pw.tsx

@@ -1,4 +1,4 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
+import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { AddressesResponse } from 'types/api/addresses';
@@ -31,30 +31,7 @@ const addresses: AddressesResponse = {
   next_page_params: null,
 };
 
-test.describe('mobile', () => {
-  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-
-  test('base view', async({ mount, page }) => {
-    await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addresses),
-    }));
-    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-      status: 200,
-      body: '',
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Accounts/>
-      </TestApp>,
-    );
-
-    await expect(component.locator('main')).toHaveScreenshot();
-  });
-});
-
-test('base view +@dark-mode', async({ mount, page }) => {
+test('base view +@mobile +@dark-mode', async({ mount, page }) => {
   await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(addresses),

ui/pages/SearchResults.pw.tsx

@@ -1,4 +1,4 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
+import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as searchMock from 'mocks/search/index';
@@ -7,7 +7,7 @@ import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import SearchResults from './SearchResults';
 
-test('search by name +@dark-mode', async({ mount, page }) => {
+test('search by name +@mobile +@dark-mode', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: 'o' },
@@ -34,7 +34,7 @@ test('search by name +@dark-mode', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by address hash', async({ mount, page }) => {
+test('search by address hash +@mobile', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.address1.address },
@@ -59,7 +59,7 @@ test('search by address hash', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block number', async({ mount, page }) => {
+test('search by block number +@mobile', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: String(searchMock.block1.block_number) },
@@ -84,7 +84,7 @@ test('search by block number', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block hash', async({ mount, page }) => {
+test('search by block hash +@mobile', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.block1.block_hash },
@@ -109,7 +109,7 @@ test('search by block hash', async({ mount, page }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by tx hash', async({ mount, page }) => {
+test('search by tx hash +@mobile', async({ mount, page }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.tx1.tx_hash },
@@ -133,133 +133,3 @@ test('search by tx hash', async({ mount, page }) => {
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
-
-test.describe('mobile', () => {
-  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('search by name', async({ mount, page }) => {
-    const hooksConfig = {
-      router: {
-        query: { q: 'o' },
-      },
-    };
-    await page.route(buildApiUrl('search') + '?q=o', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.token1,
-          searchMock.token2,
-          searchMock.contract1,
-        ],
-      }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await expect(component.locator('main')).toHaveScreenshot();
-  });
-
-  test('search by address hash', async({ mount, page }) => {
-    const hooksConfig = {
-      router: {
-        query: { q: searchMock.address1.address },
-      },
-    };
-    await page.route(buildApiUrl('search') + `?q=${ searchMock.address1.address }`, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.address1,
-        ],
-      }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await expect(component.locator('main')).toHaveScreenshot();
-  });
-
-  test('search by block number', async({ mount, page }) => {
-    const hooksConfig = {
-      router: {
-        query: { q: String(searchMock.block1.block_number) },
-      },
-    };
-    await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_number }`, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.block1,
-        ],
-      }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await expect(component.locator('main')).toHaveScreenshot();
-  });
-
-  test('search by block hash', async({ mount, page }) => {
-    const hooksConfig = {
-      router: {
-        query: { q: searchMock.block1.block_hash },
-      },
-    };
-    await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_hash }`, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.block1,
-        ],
-      }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await expect(component.locator('main')).toHaveScreenshot();
-  });
-
-  test('search by tx hash', async({ mount, page }) => {
-    const hooksConfig = {
-      router: {
-        query: { q: searchMock.tx1.tx_hash },
-      },
-    };
-    await page.route(buildApiUrl('search') + `?q=${ searchMock.tx1.tx_hash }`, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.tx1,
-        ],
-      }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await expect(component.locator('main')).toHaveScreenshot();
-  });
-});

ui/shared/Page/Page.tsx

@@ -74,7 +74,7 @@ const Page = ({
   ) : children;
 
   return (
-    <Box minWidth="fit-content">
+    <Box minWidth={{ base: '100vw', lg: 'fit-content' }}>
       <Flex w="100%" minH="100vh" alignItems="stretch">
         <NavigationDesktop/>
         <Flex flexDir="column" flexGrow={ 1 } w={{ base: '100%', lg: 'auto' }}>