fix: balance truncate

RabbyHub · Jul 31, 2024 · 0d77bac · 0d77bac
1 parent 4548508
commit 0d77bac
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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" />
             ) : (