address token transfers fix

ui/address/AddressCsvExportLink.tsx

@@ -20,6 +20,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => {
         className={ className }
         display="inline-flex"
         alignItems="center"
+        whiteSpace="nowrap"
         href={ link('csv_export', undefined, { type, address }) }
       >
         <Icon as={ svgFileIcon } boxSize={{ base: '30px', lg: 6 }}/>

ui/address/AddressTokenTransfers.tsx

@@ -22,6 +22,7 @@ import TOKEN_TYPE from 'lib/token/tokenTypes';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import HashStringShorten from 'ui/shared/HashStringShorten';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
@@ -160,7 +161,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
   });
 
   const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0);
-  const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length;
+  const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length && !currentAddress;
 
   const content = (() => {
     if (isLoading) {
@@ -225,23 +226,25 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
   })();
 
   const tokenFilterComponent = tokenFilter && (
-    <Flex alignItems="center" py={ 1 } flexWrap="wrap" mb={{ base: isPaginationVisible ? 6 : 3, lg: 0 }}>
-      Filtered by token
-      <TokenLogo hash={ tokenFilter } boxSize={ 6 } mx={ 2 }/>
-      { isMobile ? tokenFilter.slice(0, 4) + '...' + tokenFilter.slice(-4) : tokenFilter }
-      <Tooltip label="Reset filter">
-        <Flex>
-          <Icon
-            as={ crossIcon }
-            boxSize={ 6 }
-            ml={ 1 }
-            color={ resetTokenIconColor }
-            cursor="pointer"
-            _hover={{ color: resetTokenIconHoverColor }}
-            onClick={ resetTokenFilter }
-          />
-        </Flex>
-      </Tooltip>
+    <Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }>
+      <Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by token</Text>
+      <Flex alignItems="center" py={ 1 }>
+        <TokenLogo hash={ tokenFilter } boxSize={ 6 } mr={ 2 }/>
+        { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
+        <Tooltip label="Reset filter">
+          <Flex>
+            <Icon
+              as={ crossIcon }
+              boxSize={ 6 }
+              ml={ 1 }
+              color={ resetTokenIconColor }
+              cursor="pointer"
+              _hover={{ color: resetTokenIconHoverColor }}
+              onClick={ resetTokenFilter }
+            />
+          </Flex>
+        </Tooltip>
+      </Flex>
     </Flex>
   );
 

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -30,7 +30,7 @@ const TokenTransferTable = ({
 }: Props) => {
 
   return (
-    <Table variant="simple" size="sm">
+    <Table variant="simple" size="sm" minW="950px">
       <Thead top={ top }>
         <Tr>
           { showTxInfo && <Th width="44px"></Th> }