Merge pull request #576 from blockscout/mobile-fix

some fixes for mobile layout

ui/address/AddressCsvExportLink.tsx

-import { chakra, Icon, Link, Tooltip } from '@chakra-ui/react';
+import { chakra, Icon, Link, Tooltip, Hide } from '@chakra-ui/react';
 import React from 'react';
 
 import svgFileIcon from 'icons/files/csv.svg';
@@ -23,7 +23,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => {
         href={ link('csv_export', undefined, { type, address }) }
       >
         <Icon as={ svgFileIcon } boxSize={{ base: '30px', lg: 6 }}/>
-        { !isMobile && <chakra.span ml={ 1 }>Download CSV</chakra.span> }
+        <Hide ssr={ false } below="lg"><chakra.span ml={ 1 }>Download CSV</chakra.span></Hide>
       </Link>
     </Tooltip>
   );

ui/shared/address/AddressContractIcon.tsx

@@ -14,6 +14,7 @@ const AddressContractIcon = ({ className }: Props) => {
       <Box
         className={ className }
         width="24px"
+        minWidth="24px"
         height="24px"
         borderRadius="12px"
         backgroundColor={ bgColor }

ui/txs/TxsListItem.pw.tsx

+import { test, expect, devices } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as txMock from 'mocks/txs/tx';
+import TestApp from 'playwright/TestApp';
+
+import TxsListItem from './TxsListItem';
+
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+test('base view +@dark-mode', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxsListItem tx={ txMock.base } showBlockInfo/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with base address', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxsListItem tx={ txMock.base } showBlockInfo currentAddress={ txMock.base.from.hash }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/txs/TxsListItem.tsx

@@ -92,7 +92,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
         </Box>
       ) }
       <Flex alignItems="center" height={ 6 } mt={ 6 }>
-        <Address width={ `calc((100%-${ currentAddress ? TAG_WIDTH : ARROW_WIDTH + 8 }px)/2)` }>
+        <Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
           <AddressIcon address={ tx.from }/>
           <AddressLink
             type="address"
@@ -104,7 +104,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
           />
         </Address>
         { (isIn || isOut) ?
-          <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 }/> : (
+          <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 }/> : (
             <Icon
               as={ rightArrowIcon }
               boxSize={ 6 }
@@ -112,7 +112,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
               color="gray.500"
             />
           ) }
-        <Address width="calc((100%-40px)/2)">
+        <Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
           <AddressIcon address={ dataTo }/>
           <AddressLink
             type="address"