From 0e46fd696e052e0d27e81b5ed7b9b2d6399f08e8 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Fri, 15 Nov 2024 12:45:21 -0800
Subject: [PATCH] fix: custom token spacing, and overflow

---
 .../network-assets/components/custom-evm-token.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue b/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue
index a1219e480..f1e8453cb 100644
--- a/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue
+++ b/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue
@@ -47,7 +47,14 @@
                     ).value
                   : '~'
               }}
-              <span>{{ tokenInfo.symbol }}</span>
+              <span v-if="tokenInfo.symbol.length <= 16">{{
+                tokenInfo.symbol
+              }}</span>
+              <tooltip v-else :text="tokenInfo.symbol"
+                ><span>{{
+                  `${tokenInfo.symbol.slice(0, 12)}...`
+                }}</span></tooltip
+              >
             </p>
           </div>
         </div>
@@ -279,7 +286,7 @@ const addToken = async () => {
 
 .add-custom-token {
   width: 460px;
-  height: 568px;
+  height: 385px;
   box-sizing: border-box;
   position: relative;
   border-radius: 12px;
@@ -422,10 +429,11 @@ const addToken = async () => {
         letter-spacing: 0.5px;
         color: @secondaryLabel;
         margin: 0;
-        width: 128px;
+        display: flex;
 
         span {
           font-variant: small-caps;
+          font-size: 12px;
         }
       }
     }