diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index bc024e024..1e4d9c733 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -29,46 +29,57 @@ &::before { right: 0; - top: 60%; } } - .multiselect__content .multiselect__option { - font-size: $font-size-small; - font-weight: $font-weight-normal; + .multiselect__content { + max-width: 100%; - &.multiselect__option--highlight { - background: var(--white); - color: var(--color-body); - } + .multiselect__option { + font-size: $font-size-small; + font-weight: $font-weight-normal; - &.multiselect__option--highlight:hover { - background: var(--w-50); - color: var(--color-body); - - &::after { - background: var(--w-50); - color: var(--s-600); + span { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; } - } - &.multiselect__option--highlight::after { - background: transparent; - } - - &.multiselect__option--selected { - background: var(--w-400); - color: var(--white); + &.multiselect__option--highlight { + background: var(--white); + color: var(--color-body); + } &.multiselect__option--highlight:hover { - background: var(--w-600); - color: var(--white); + background: var(--w-50); + color: var(--color-body); &::after { - background: transparent; + background: var(--w-50); + color: var(--s-600); + } + } + + &.multiselect__option--highlight::after { + background: transparent; + } + + &.multiselect__option--selected { + background: var(--w-400); + color: var(--white); + + &.multiselect__option--highlight:hover { + background: var(--w-600); color: var(--white); - &:hover { + &::after { + background: transparent; + color: var(--white); + } + + &::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; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss index dc2a4c2d1..ce29e226e 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss +++ b/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; } } } diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue index 4d62e8dd9..45d9e204c 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue +++ b/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" diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue index fd8a27032..c3c9d62f9 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue +++ b/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;