Celo: `Epoch rewards` tab bugs on mobile (#2346)

Fixes #2342

ui/address/contract/methods/ContractAbiItem.tsx

@@ -40,14 +40,6 @@ const ContractAbiItem = ({ data, index, id, addressHash, sourceAddress, tab, onS
     });
   }, [ addressHash, data, tab, sourceAddress ]);
 
-  const handleCopyLinkClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-  }, []);
-
-  const handleCopyMethodIdClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-  }, []);
-
   const handleReset = React.useCallback(() => {
     setAttempt((prev) => prev + 1);
   }, []);
@@ -71,7 +63,7 @@ const ContractAbiItem = ({ data, index, id, addressHash, sourceAddress, tab, onS
               alignItems="center"
               columnGap={ 2 }
             >
-              <CopyToClipboard text={ url } onClick={ handleCopyLinkClick } type="link" ml={ 0 } color="text_secondary"/>
+              <CopyToClipboard text={ url } type="link" ml={ 0 } color="text_secondary"/>
               <Box as="div" fontWeight={ 500 } display="flex" alignItems="center">
                 { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
                 { data.type === 'fallback' && (
@@ -101,7 +93,7 @@ const ContractAbiItem = ({ data, index, id, addressHash, sourceAddress, tab, onS
               { 'method_id' in data && (
                 <Tag display="inline-flex" alignItems="center" flexShrink={ 0 }>
                   { data.method_id }
-                  <CopyToClipboard text={ data.method_id } onClick={ handleCopyMethodIdClick }/>
+                  <CopyToClipboard text={ data.method_id }/>
                 </Tag>
               ) }
               <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>

ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx

@@ -34,7 +34,7 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
       onClick={ isLoading || !data.count ? undefined : section.onToggle }
       cursor={ isLoading || !data.count ? undefined : 'pointer' }
     >
-      <Flex my="3px" columnGap={ 3 } alignItems="center" flexWrap="wrap" rowGap={ 1 }>
+      <Flex my="3px" columnGap={ 3 } alignItems="center" flexWrap="wrap" rowGap={ 2 }>
         { data.count ? (
           <Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
             <IconButton
@@ -55,7 +55,7 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
         ) : <Box boxSize={ 6 }/> }
         <EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
         <Skeleton isLoaded={ !isLoading }>{ data.count }</Skeleton>
-        <Flex columnGap={ 2 } alignItems="center" ml="auto" fontWeight={ 500 }>
+        <Flex columnGap={ 2 } alignItems="center" ml={{ base: 9, lg: 'auto' }} w={{ base: '100%', lg: 'fit-content' }} fontWeight={ 500 }>
           <Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
           <TokenEntity
             token={ data.token }

ui/block/epochRewards/BlockEpochRewardsDistribution.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { BlockEpoch } from 'types/api/block';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
 
@@ -12,6 +13,7 @@ interface Props {
 }
 
 const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
+  const isMobile = useIsMobile();
 
   if (!data.distribution.community_transfer && !data.distribution.carbon_offsetting_transfer && !data.distribution.reserve_bolster_transfer) {
     return null;
@@ -33,7 +35,7 @@ const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
             Community fund
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            <TokenTransferSnippet data={ data.distribution.community_transfer } isLoading={ isLoading } noAddressIcons={ false }/>
+            <TokenTransferSnippet data={ data.distribution.community_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
           </DetailsInfoItem.Value>
         </>
       ) }
@@ -46,7 +48,7 @@ const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
             Carbon offset fund
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            <TokenTransferSnippet data={ data.distribution.carbon_offsetting_transfer } isLoading={ isLoading } noAddressIcons={ false }/>
+            <TokenTransferSnippet data={ data.distribution.carbon_offsetting_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
           </DetailsInfoItem.Value>
         </>
       ) }
@@ -59,7 +61,7 @@ const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
             Reserve bolster
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            <TokenTransferSnippet data={ data.distribution.reserve_bolster_transfer } isLoading={ isLoading } noAddressIcons={ false }/>
+            <TokenTransferSnippet data={ data.distribution.reserve_bolster_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
           </DetailsInfoItem.Value>
         </>
       ) }

ui/shared/CopyToClipboard.tsx

@@ -34,6 +34,7 @@ const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type,
   }, [ hasCopied ]);
 
   const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
     onCopy();
     onClick?.(event);
   }, [ onClick, onCopy ]);

ui/shared/address/AddressFromTo.tsx

@@ -55,7 +55,6 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
             truncation="constant"
             maxW="calc(100% - 28px)"
             w="min-content"
-
           />
         </Flex>
         { to && (