[edit] style

src/view/components/currency-list.vue

@@ -355,6 +355,7 @@ defineExpose({
                         font-weight: 500;
                         font-size: 15px;
                         margin-bottom: 5px;
+                        word-break: break-all;
                     }
 
                     .desc {

src/view/popup/components/head.vue

@@ -117,6 +117,7 @@ function clickList() {
     justify-content: space-between;
     align-items: center;
     padding: 0 12px;
+    overflow: hidden;
 
     &.home {
         height: 64px;

src/view/popup/currency-detail.vue

@@ -13,11 +13,15 @@
         class="icon-currency"
         :src="currencyInfo.iconPath"/>
       <div class="amount">
-        <div class="balance">
+        <div class="balance"
+             :class="{'direction-column': (currencyInfo.totalBalance.length + currencyInfo.tokenSymbol.length) > 12}">
+             
           <a-tooltip :title="currencyInfo.totalBalance">
               {{ getBit(currencyInfo.totalBalance) }}
           </a-tooltip> 
-          {{currencyInfo.tokenSymbol}}
+          <span class="symbol">
+             {{currencyInfo.tokenSymbol}}
+          </span>
         </div>
         <div class="final">
           <a-tooltip :title="'$'+currencyInfo.totalUsdEstimateBalance">
@@ -59,7 +63,10 @@ import currencySelect from "@/view/components/currency-select.vue";
 import { getBit } from "@/uilts/help";
 
 let currenciesData = ref([]);
-let currencyInfo = ref({});
+let currencyInfo = ref({
+  totalBalance: '',
+  tokenSymbol: ''
+});
 let showCurrencySelect = ref(false);
 
 let currencyOpertionType = '';
@@ -220,6 +227,17 @@ onMounted(() => {
         box-sizing: border-box;
         width: 100%;
         word-break: break-word;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .symbol{
+          word-break: break-all;
+        }
+      }
+
+      .direction-column {
+        flex-direction: column;
       }
 
       .final {