fix contract list modal for mobiles

ui/marketplace/ContractListModal.tsx

 import {
-  Grid, Modal, ModalBody,
+  Box, Modal, ModalBody,
   ModalCloseButton, ModalContent, ModalHeader, ModalOverlay,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -45,11 +45,21 @@ const ContractListModal = ({ onClose, type, contracts }: Props) => {
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3" mb={ 4 }>Contracts</ModalHeader>
         <ModalCloseButton/>
-        <ModalBody maxH="352px" overflow="scroll" mb={ 0 } display="flex" flexDirection="column" gap={ 2 }>
+        <ModalBody
+          maxH={ isMobile ? 'auto' : '352px' }
+          overflow="scroll"
+          mb={ 0 }
+          display="grid"
+          gridTemplateColumns="max-content 1fr"
+          rowGap={ 2 }
+          columnGap={ type === ContractListTypes.ANALYZED ? 4 : 0 }
+        >
           { displayedContracts.map((contract) => (
-            <Grid key={ contract.address } height={ 8 } alignItems="center" gap={ 6 } templateColumns="max-content 1fr">
+            <>
               { type === ContractListTypes.ANALYZED && (
+                <Box gridColumn={ 1 }>
                   <ContractSecurityReport securityReport={ contract.solidityScanReport }/>
+                </Box>
               ) }
               <AddressEntity
                 address={{
@@ -59,8 +69,10 @@ const ContractListModal = ({ onClose, type, contracts }: Props) => {
                   is_verified: contract.isVerified,
                 }}
                 noCopy
+                gridColumn={ 2 }
+                height="32px"
               />
-            </Grid>
+            </>
           )) }
         </ModalBody>
       </ModalContent>

ui/marketplace/MarketplaceListWithScores/ListItem.tsx

@@ -2,7 +2,8 @@ import { Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
-import type { MarketplaceAppPreview, ContractListTypes } from 'types/client/marketplace';
+import type { MarketplaceAppPreview } from 'types/client/marketplace';
+import { ContractListTypes } from 'types/client/marketplace';
 
 import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
@@ -44,6 +45,14 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
     onFavoriteClick(id, isFavorite);
   }, [ onFavoriteClick, id, isFavorite ]);
 
+  const showAllContracts = React.useCallback(() => {
+    showContractList(id, ContractListTypes.ALL);
+  }, [ showContractList, id ]);
+
+  const showVerifiedContracts = React.useCallback(() => {
+    showContractList(id, ContractListTypes.VERIFIED);
+  }, [ showContractList, id ]);
+
   return (
     <ListItemMobile
       rowGap={ 3 }
@@ -80,8 +89,8 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
         <Flex alignItems="center">
           <Flex flex={ 1 } gap={ 3 } alignItems="center">
             <AppSecurityReport id={ id } securityReport={ securityReport } showContractList={ showContractList }/>
-            <LinkButton onClick={ handleInfoClick } icon="contracts">{ totalContractsNumber }</LinkButton>
-            <LinkButton onClick={ handleInfoClick } icon="contracts_verified" iconColor="green.500">{ verifiedNumber }</LinkButton>
+            <LinkButton onClick={ showAllContracts } icon="contracts">{ totalContractsNumber }</LinkButton>
+            <LinkButton onClick={ showVerifiedContracts } icon="contracts_verified" iconColor="green.500">{ verifiedNumber }</LinkButton>
           </Flex>
           { !isLoading && (
             <LinkButton onClick={ handleInfoClick }>More info</LinkButton>