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,16 +13,23 @@ const TxDetailsActions = ({ actions }) => {
       hint="Highlighted events of the transaction"
       position="relative"
     >
-      <Box className="mCustomScrollbar" data-mcs-theme="minimal-dark" maxH={ 40 }>
-        <Flex
-          flexDirection="column"
-          alignItems="flex-start"
-          rowGap={ 5 }
-          w="100%"
-          fontWeight={ 500 }
-        >
-          { actions.map((action, index) => <TxDetailsAction key={ index } { ...action } isLast={ index === actions.length-1 }/>) }
-        </Flex>
+      <Box w="100%">
+        <Box className="mCustomScrollbar" data-mcs-theme="minimal-dark" maxH={ 36 }>
+          <Flex
+            flexDirection="column"
+            alignItems="flex-start"
+            rowGap={ 5 }
+            w="100%"
+            fontWeight={ 500 }
+          >
+            { 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>
   );