Fix vertical scroller for tx actions area

public/static/css/jquery.mCustomScrollbar.min.css

@@ -10,11 +10,11 @@
   background: linear-gradient(180deg,hsla(0,0%,100%,.3),hsla(0,0%,100%,1));
 }
 
-.mCustomScrollbar.mCS_no_scrollbar:after {
+.mCustomScrollbar.mCS_no_scrollbar_y:after {
   display: none;
 }
 
-.mCustomScrollbar.mCS_no_scrollbar .lastItem {
+.mCSB_container.mCS_no_scrollbar_y .lastItem {
   margin-bottom: 0!important;
 }
 

ui/shared/DetailsInfoItem.tsx

@@ -10,10 +10,10 @@ interface Props extends Omit<HTMLChakraProps<'div'>, 'title'> {
   children: React.ReactNode;
 }
 
-const DetailsInfoItem = ({ title, hint, note, noteDisplay, children, ...styles }: Props) => {
+const DetailsInfoItem = ({ title, hint, note, noteDisplay, children, id, ...styles }: Props) => {
   return (
     <>
-      <GridItem py={{ base: 1, lg: 2 }} lineHeight={ 5 } { ...styles } whiteSpace="nowrap" _notFirst={{ mt: { base: 3, lg: 0 } }}>
+      <GridItem py={{ base: 1, lg: 2 }} id={ id } lineHeight={ 5 } { ...styles } whiteSpace="nowrap" _notFirst={{ mt: { base: 3, lg: 0 } }}>
         <Flex columnGap={ 2 } alignItems="flex-start">
           <Tooltip
             label={ hint }

ui/tx/TxDetails.tsx

@@ -66,6 +66,8 @@ const TxDetails = () => {
     ...toAddress.watchlist_names || [],
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
+  const actionsExist = data.actions && data.actions.length > 0;
+
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
       { socketStatus && (
@@ -126,10 +128,10 @@ const TxDetails = () => {
           <Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
         </DetailsInfoItem>
       ) }
-      { data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 3 }}><Divider /></GridItem> }
-      { data.actions && <TxDetailsActions actions={ data.actions }/> }
-      { data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mb={{ base: 0, lg: 3 }}><Divider /></GridItem> }
-      { !data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/> }
+      { actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 3 }}><Divider /></GridItem>) }
+      { actionsExist && (<TxDetailsActions actions={ data.actions }/>) }
+      { actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mb={{ base: 0, lg: 3 }}><Divider /></GridItem>) }
+      { !actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>) }
       <DetailsInfoItem
         title="From"
         hint="Address (external or contract) sending the transaction."

ui/tx/details/TxDetailsAction.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import link from 'lib/link/link';
 import { space } from 'lib/html-entities';
 import AddressLink from 'ui/shared/address/AddressLink';
-import TokenSnippet from 'ui/shared/TokenSnippet';
+import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import StringShorten from 'ui/shared/StringShorten';
 
 import BigNumber from 'bignumber.js';

ui/tx/details/TxDetailsActions.tsx

@@ -16,7 +16,7 @@ const TxDetailsActions = ({ actions }) => {
       position="relative"
       id="txActionsTitle"
     >
-      <Box className="mCustomScrollbar" maxH={ 36 } w="90%">
+      <Box className="mCustomScrollbar" maxH={ 36 } w="98%" overflow="hidden">
         <Flex
           flexDirection="column"
           alignItems="flex-start"
@@ -31,9 +31,11 @@ const TxDetailsActions = ({ actions }) => {
         $(".mCustomScrollbar").mCustomScrollbar({callbacks:{
           onOverflowY: () => {
             $("#txActionsTitle .note").css("display", "block");
+            $(".mCustomScrollbar").removeClass("mCS_no_scrollbar_y");
           },
           onOverflowYNone: () => {
             $("#txActionsTitle .note").css("display", "none");
+            $(".mCustomScrollbar").addClass("mCS_no_scrollbar_y");
           }
         },
         theme: "dark",