trying to fix truncation

blockscout · Jan 17, 2024 · ba685cf · ba685cf
1 parent 36e863c
commit ba685cf
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 5 deletions.
diff --git a/...ddress/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png b/...ddress/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png
diff --git a/...kenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png b/...kenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png
diff --git a/...Transfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png b/...Transfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png
diff --git a/ui/shared/address/AddressFromTo.tsx b/ui/shared/address/AddressFromTo.tsx
@@ -75,18 +75,21 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
     );
   }
 
+  const isOutgoing = current === from.hash;
+  const iconSizeWithMargins = (5 + (isOutgoing ? 4 : 2) + 3) * 4;
+
   return (
     <Flex className={ className } alignItems="center">
       <Entity
         address={ from }
         isLoading={ isLoading }
-        noLink={ current === from.hash }
-        noCopy={ current === from.hash }
+        noLink={ isOutgoing }
+        noCopy={ isOutgoing }
         noIcon={ noIcon }
         tokenHash={ tokenHash }
         truncation={ truncation }
-        maxW={ truncation === 'constant' ? undefined : 'calc(50% - 20px)' }
-        mr={ current === from.hash ? 4 : 2 }
+        maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
+        mr={ isOutgoing ? 4 : 2 }
       />
       <AddressFromToIcon
         isLoading={ isLoading }
@@ -101,7 +104,7 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
           noIcon={ noIcon }
           tokenHash={ tokenHash }
           truncation={ truncation }
-          maxW={ truncation === 'constant' ? undefined : 'calc(50% - 20px)' }
+          maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
           ml={ 3 }
         />
       ) : <span>-</span> }

diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png