From 899ddcef0dfb6f5ab03ce05867721066dda8806b Mon Sep 17 00:00:00 2001 From: Pranjal Kushwaha Date: Fri, 7 May 2021 18:28:47 +0530 Subject: [PATCH] fix: Fixes overlaps for name in conversation header (#1978) * Fix width of text * Review fixes * Use mixins * user name textoverflow * Review fixes: Remove changes in text-truncate class Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Nithin David Thomas --- .../dashboard/assets/scss/widgets/_conv-header.scss | 7 ++++++- .../components/widgets/conversation/ConversationBox.vue | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss index ce29e226e..1c081c089 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss @@ -39,20 +39,25 @@ $resolve-button-width: 13.2rem; .user { @include flex; @include flex-align($x: center, $y: middle); + margin-right: var(--space-normal); + min-width: 0; .user--name { @include margin(0); + display: inline-block; font-size: $font-size-medium; line-height: 1.3; text-transform: capitalize; + width: 100%; } .user--profile__meta { align-items: flex-start; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; margin-left: $space-slab; + min-width: 0; } .user--profile__button { diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue index a4512cbbc..0174076ba 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue @@ -80,6 +80,7 @@ export default { .conversation-details-wrap { display: flex; flex-direction: column; + min-width: 0; width: 100%; border-left: 1px solid var(--color-border); background: var(--color-background-light);