Fix: Agent name overflow in dropdown menu (#2047)

* Fixes agent name overflow

Co-authored-by: Sivin Varghese <64252451+sivin-git@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -29,14 +29,24 @@
 
     &::before {
       right: 0;
-      top: 60%;
     }
   }
 
-  .multiselect__content .multiselect__option {
+  .multiselect__content {
+    max-width: 100%;
+
+    .multiselect__option {
       font-size: $font-size-small;
       font-weight: $font-weight-normal;
 
+      span {
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
+
       &.multiselect__option--highlight {
         background: var(--white);
         color: var(--color-body);
@@ -67,8 +77,9 @@
           &::after {
             background: transparent;
             color: var(--white);
+          }
 
-          &:hover {
+          &::after:hover {
             color: var(--color-body);
           }
         }
@@ -126,7 +137,6 @@
 }
 
 .sidebar-labels-wrap {
-
   &.has-edited,
   &:hover {
     .multiselect {
@@ -149,7 +159,6 @@
   }
 }
 
-
 .multiselect-wrap--small {
   $multiselect-height: 3.8rem;
 

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -14,7 +14,7 @@ $resolve-button-width: 13.2rem;
     border: 1px solid var(--color-border);
     border-radius: var(--space-smaller);
     margin-right: var(--space-small);
-    width: 20.2rem;
+    width: 21.6rem;
 
     .icon {
       color: $medium-gray;
@@ -25,11 +25,12 @@ $resolve-button-width: 13.2rem;
     }
 
     .multiselect {
+      border-radius: var(--border-radius-small);
       margin: 0;
       min-width: 0;
 
       .multiselect__tags {
-        border: 0;
+        border-color: transparent;
       }
     }
   }

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -36,10 +36,10 @@
           v-model="currentChat.meta.assignee"
           :loading="uiFlags.isFetching"
           :allow-empty="true"
-          :deselect-label="$t('CONVERSATION.ASSIGNMENT.REMOVE')"
+          deselect-label=""
           :options="agentList"
           :placeholder="$t('CONVERSATION.ASSIGNMENT.SELECT_AGENT')"
-          :select-label="$t('CONVERSATION.ASSIGNMENT.ASSIGN')"
+          select-label=""
           label="name"
           selected-label
           track-by="id"

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -292,6 +292,14 @@ export default {
   }
 }
 
+.multiselect-wrap--small {
+  &::v-deep .multiselect__element {
+    span {
+      width: 100%;
+    }
+  }
+}
+
 .close-button {
   position: absolute;
   right: $space-normal;