From 0d77bac4b5731037bfc0ba550bcc33f8247c71d3 Mon Sep 17 00:00:00 2001
From: Fhasghrge <1969533391@qq.com>
Date: Tue, 30 Jul 2024 20:16:38 +0800
Subject: [PATCH] fix: balance truncate

---
 src/ui/views/AddressManagement/AddressItem.tsx            | 8 ++++----
 src/ui/views/AddressManagement/style.less                 | 1 +
 src/ui/views/CommonPopup/AssetList/TokenItem.tsx          | 4 ++--
 .../Dashboard/components/BalanceView/BalanceLabel.tsx     | 2 +-
 .../Dashboard/components/BalanceView/BalanceView.tsx      | 2 +-
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/ui/views/AddressManagement/AddressItem.tsx b/src/ui/views/AddressManagement/AddressItem.tsx
index 2ed8bb84a7d..3847c355e0d 100644
--- a/src/ui/views/AddressManagement/AddressItem.tsx
+++ b/src/ui/views/AddressManagement/AddressItem.tsx
@@ -230,7 +230,7 @@ const AddressItem = memo(
                   BRAND_ALIAN_TYPE_TEXT[brandName] || brandName
                 )}
               >
-                <div className="relative mr-[12px]">
+                <div className="relative mr-[12px] flex-none">
                   <img
                     src={addressTypeIcon}
                     className={
@@ -321,7 +321,7 @@ const AddressItem = memo(
                           />
                         </>
                       ) : (
-                        <span className="ml-[12px] text-12 text-r-neutral-body">
+                        <span className="ml-[12px] text-12 text-r-neutral-body truncate flex-1 block">
                           ${splitNumberByStep(balance?.toFixed(2))}
                         </span>
                       )}
@@ -338,7 +338,7 @@ const AddressItem = memo(
                 </div>
               )}
               {isCurrentAccount && (
-                <div className="rabby-address-item-extra flex items-center justify-center">
+                <div className="rabby-address-item-extra flex items-center justify-center flex-1 overflow-hidden">
                   {isUpdatingBalance ? (
                     <>
                       <SkeletonInput
@@ -350,7 +350,7 @@ const AddressItem = memo(
                       />
                     </>
                   ) : (
-                    <span className="text-15 font-medium text-white">
+                    <span className="text-15 font-medium text-white w-full truncate text-right">
                       ${splitNumberByStep(balance?.toFixed(2))}
                     </span>
                   )}
diff --git a/src/ui/views/AddressManagement/style.less b/src/ui/views/AddressManagement/style.less
index 8405106f56d..367a7486d08 100644
--- a/src/ui/views/AddressManagement/style.less
+++ b/src/ui/views/AddressManagement/style.less
@@ -94,6 +94,7 @@
     &-content {
       flex: 1;
       margin-right: auto;
+      overflow: hidden;
     }
     &-title {
       font-weight: 500;
diff --git a/src/ui/views/CommonPopup/AssetList/TokenItem.tsx b/src/ui/views/CommonPopup/AssetList/TokenItem.tsx
index 82839087728..91ba4004f46 100644
--- a/src/ui/views/CommonPopup/AssetList/TokenItem.tsx
+++ b/src/ui/views/CommonPopup/AssetList/TokenItem.tsx
@@ -42,7 +42,7 @@ const TokenItemAsset: React.FC<Props> = ({ item }) => {
         </TooltipWithMagnetArrow>
       </div>
       <div className="flex flex-col gap-4 overflow-hidden">
-        <span className="text-r-neutral-title-1 text-13 font-medium leading-[15px]">
+        <span className="text-r-neutral-title-1 text-13 font-medium leading-[15px] truncate">
           {item._amountStr}
         </span>
         <span className="text-r-neutral-body text-12 leading-[14px] whitespace-nowrap overflow-ellipsis overflow-hidden">
@@ -79,7 +79,7 @@ const TokenItemPrice: React.FC<Props> = ({ item }) => {
 
 const TokenItemUSDValue: React.FC<Props> = ({ item }) => {
   return (
-    <TCell className="py-8 text-r-neutral-title-1 text-13 font-medium text-right w-[110px]">
+    <TCell className="py-8 text-r-neutral-title-1 text-13 font-medium text-right w-[110px] truncate">
       {item._usdValueStr || '<$0.01'}
     </TCell>
   );
diff --git a/src/ui/views/Dashboard/components/BalanceView/BalanceLabel.tsx b/src/ui/views/Dashboard/components/BalanceView/BalanceLabel.tsx
index 8a700b8091b..90c7fc9aacf 100644
--- a/src/ui/views/Dashboard/components/BalanceView/BalanceLabel.tsx
+++ b/src/ui/views/Dashboard/components/BalanceView/BalanceLabel.tsx
@@ -19,7 +19,7 @@ export const BalanceLabel: React.FC<Props> = ({ balance }) => {
   return (
     <div
       className={clsx(
-        'cursor-pointer transition-opacity'
+        'cursor-pointer transition-opacity truncate'
         // isCache && 'opacity-80'
       )}
       title={splitBalance}
diff --git a/src/ui/views/Dashboard/components/BalanceView/BalanceView.tsx b/src/ui/views/Dashboard/components/BalanceView/BalanceView.tsx
index e255e0396c2..d8c1f4596fb 100644
--- a/src/ui/views/Dashboard/components/BalanceView/BalanceView.tsx
+++ b/src/ui/views/Dashboard/components/BalanceView/BalanceView.tsx
@@ -331,7 +331,7 @@ const BalanceView = ({
     <div onMouseLeave={onMouseLeave} className={clsx('assets flex')}>
       <div className="left relative overflow-x-hidden mx-10">
         <div className={clsx('amount group w-[100%]', 'text-32 mt-6')}>
-          <div className={clsx('amount-number leading-[38px]')}>
+          <div className={clsx('amount-number leading-[38px] max-w-full')}>
             {shouldShowBalanceLoading ? (
               <Skeleton.Input active className="w-[200px] h-[38px] rounded" />
             ) : (