From 9c721d279e960d4c11d40334e18c28b7aa54715f Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Mon, 20 Jun 2022 22:32:52 +0530
Subject: [PATCH] fix: Truncate overflowing labels in bulk actions selector
 (#4898)

---
 .../conversation/conversationBulkActions/LabelActions.vue     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 70f74199b..8746a8653 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -50,7 +50,7 @@
               :value="label.title"
               class="label-checkbox"
             />
-            <span class="label-title">{{ label.title }}</span>
+            <span class="label-title text-truncate">{{ label.title }}</span>
             <span
               class="label-pill"
               :style="{ backgroundColor: label.color }"
@@ -249,6 +249,7 @@ ul {
 
     .label-title {
       flex-grow: 1;
+      width: 100%;
     }
 
     .label-pill {
@@ -256,6 +257,7 @@ ul {
       border-radius: var(--border-radius-medium);
       height: var(--space-slab);
       width: var(--space-slab);
+      flex-shrink: 0;
     }
   }
 }