From 7d409321e9f606ea5a9487b5dff04f3f16349d27 Mon Sep 17 00:00:00 2001
From: amd-9 <asamoshin9@gmail.com>
Date: Sat, 10 Oct 2020 20:10:11 +0300
Subject: [PATCH] fix: Truncate long label names in the sidebar (#1309)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>
---
 .../dashboard/components/layout/Sidebar.vue   |  1 +
 .../components/layout/SidebarItem.vue         | 20 +++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 0b06cfdc0..fddfaab6e 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -275,6 +275,7 @@ export default {
           id: label.id,
           label: label.title,
           color: label.color,
+          truncateLabel: true,
           toState: frontendURL(
             `accounts/${this.accountId}/label/${label.title}`
           ),
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue
index 396033f76..df7318aad 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/app/javascript/dashboard/components/layout/SidebarItem.vue
@@ -30,7 +30,7 @@
         tag="li"
         :to="child.toState"
       >
-        <a href="#">
+        <a href="#" :class="computedChildClass(child)">
           <div class="wrap">
             <i
               v-if="computedInboxClass(child)"
@@ -42,8 +42,12 @@
               class="label-color--display"
               :style="{ backgroundColor: child.color }"
             />
-
-            {{ child.label }}
+            <div
+              :title="computedChildTitle(child)"
+              :class="computedChildClass(child)"
+            >
+              {{ child.label }}
+            </div>
           </div>
         </a>
       </router-link>
@@ -52,7 +56,6 @@
 </template>
 
 <script>
-/* eslint no-console: 0 */
 import { mapGetters } from 'vuex';
 
 import router from '../../routes';
@@ -125,6 +128,14 @@ export default {
       const classByType = getInboxClassByType(type, phoneNumber);
       return classByType;
     },
+    computedChildClass(child) {
+      if (!child.truncateLabel) return '';
+      return 'text-truncate';
+    },
+    computedChildTitle(child) {
+      if (!child.truncateLabel) return false;
+      return child.label;
+    },
     newLinkClick() {
       router.push({ name: 'settings_inbox_new', params: { page: 'new' } });
     },
@@ -151,6 +162,7 @@ export default {
   border-radius: $space-smaller;
   height: $space-normal;
   margin-right: $space-small;
+  min-width: $space-normal;
   width: $space-normal;
 }
 </style>