From 1a512a5f600793e255bcbcaaa60f47fb1470cfc5 Mon Sep 17 00:00:00 2001
From: imollov <ivomollov@gmail.com>
Date: Thu, 4 Feb 2021 13:07:49 +0200
Subject: [PATCH] fix: long ft names go outside borders

---
 .../router/components/FungibleTokens/TokensListItem.vue   | 4 +++-
 src/popup/router/pages/FungibleTokens/TokenDetails.vue    | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/popup/router/components/FungibleTokens/TokensListItem.vue b/src/popup/router/components/FungibleTokens/TokensListItem.vue
index 84f5a7122..b50311689 100644
--- a/src/popup/router/components/FungibleTokens/TokensListItem.vue
+++ b/src/popup/router/components/FungibleTokens/TokensListItem.vue
@@ -14,7 +14,7 @@
     <div class="details">
       <div>
         <div class="title text-ellipsis" :title="tokenData.name">
-          {{ tokenData.name }}
+          {{ ellipseStringMid(tokenData.name, 30) }}
         </div>
         <div>
           <label>{{ $t('pages.fungible-tokens.mcap') }}</label>
@@ -42,6 +42,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { ellipseStringMid } from '../../../utils/helper';
 import Avatar from '../Avatar';
 import TokenAmount from '../TokenAmount';
 
@@ -52,6 +53,7 @@ export default {
     name: String,
   },
   computed: mapGetters(['formatCurrency']),
+  methods: { ellipseStringMid },
 };
 </script>
 
diff --git a/src/popup/router/pages/FungibleTokens/TokenDetails.vue b/src/popup/router/pages/FungibleTokens/TokenDetails.vue
index dd0ef2951..c1c282417 100644
--- a/src/popup/router/pages/FungibleTokens/TokenDetails.vue
+++ b/src/popup/router/pages/FungibleTokens/TokenDetails.vue
@@ -62,6 +62,7 @@
 <script>
 import { pick } from 'lodash-es';
 import { mapGetters, mapState } from 'vuex';
+import { ellipseStringMid } from '../../../utils/helper';
 import TabsMenu from '../../components/TabsMenu';
 import Avatar from '../../components/Avatar';
 import TokenAmount from '../../components/TokenAmount';
@@ -96,12 +97,15 @@ export default {
   created() {
     this.$store.commit(
       'setPageTitle',
-      this.availableTokens[this.id] ? this.availableTokens[this.id].name : 'Aeternity',
+      this.fungibleToken ? ellipseStringMid(this.fungibleToken.name, 22) : 'Aeternity',
     );
   },
   computed: {
     ...mapGetters(['tippingSupported', 'formatCurrency']),
     ...mapState('fungibleTokens', ['tokenBalances', 'availableTokens', 'aePublicData']),
+    fungibleToken() {
+      return this.availableTokens[this.id];
+    },
     tokenData() {
       if (this.id === 'aeternity') {
         return {
@@ -114,7 +118,7 @@ export default {
       }
       return (
         this.tokenBalances.find(({ contract }) => contract === this.id) || {
-          ...this.availableTokens[this.id],
+          ...this.fungibleToken,
           contract: this.id,
         }
       );