Add 'Scroll for more' text note for tx actions area

ui/tx/details/TxDetailsAction.tsx

@@ -25,7 +25,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
       }
 
       return (
-        <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } marginBottom={ isLast ? 5 : 0 }>
+        <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } className={ isLast ? "lastItem" : "" } marginBottom={ isLast ? 5 : 0 }>
           <Text color="gray.500" as="span">
             { actionName[type][0] }
           </Text>
@@ -59,7 +59,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
     } else if (type === 'mint_nft') {
       const tokenUrl = link('token_index', { hash: data.address });
       return (
-        <Flex rowGap={ 2 } flexDirection="column">
+        <Flex rowGap={ 2 } flexDirection="column" className={ isLast ? "lastItem" : "" } marginBottom={ isLast ? 5 : 0 }>
           <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }>
             <Flex columnGap={ 1 }>
               <Text as="span">Mint of</Text>

ui/tx/details/TxDetailsActions.tsx

-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import React from 'react';
+import { space } from 'lib/html-entities';
 
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
@@ -12,7 +13,8 @@ const TxDetailsActions = ({ actions }) => {
       hint="Highlighted events of the transaction"
       position="relative"
     >
-      <Box className="mCustomScrollbar" data-mcs-theme="minimal-dark" maxH={ 40 }>
+      <Box w="100%">
+        <Box className="mCustomScrollbar" data-mcs-theme="minimal-dark" maxH={ 36 }>
           <Flex
             flexDirection="column"
             alignItems="flex-start"
@@ -23,6 +25,12 @@ const TxDetailsActions = ({ actions }) => {
             { actions.map((action, index) => <TxDetailsAction key={ index } { ...action } isLast={ index === actions.length-1 }/>) }
           </Flex>
         </Box>
+        <Text fontWeight={ 500 } color="gray.500" fontSize="sm" id="txActionsScrollForMore" display="none" marginTop={ 5 }>
+          Scroll for more
+          { space }
+          <Text color="gray.500" transform="rotate(90deg)" display="inline-block" as="span">&raquo;</Text>
+        </Text>
+      </Box>
     </DetailsInfoItem>
   );
 };