LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: Long names hide the resolve button (#8083)

Browse Source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2023-10-11 13:25:20 +05:30
committed by GitHub
parent a3d008da06
commit 88de3359a5
3 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@@ -3,10 +3,10 @@
class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row" class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
> >
<div <div
class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center" class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
> >
<div <div
class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0" class="flex justify-start items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0 w-[inherit]"
> >
<back-button <back-button
v-if="showBackButton" v-if="showBackButton"
@@ -19,26 +19,31 @@
:username="currentContact.name" :username="currentContact.name"
:status="currentContact.availability_status" :status="currentContact.availability_status"
/> />
<div class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0"> <div
<woot-button class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-[inherit] overflow-hidden"
variant="link" >
color-scheme="secondary" <div class="flex items-center flex-row gap-1 m-0 p-0 w-[inherit]">
class="overflow-hidden whitespace-nowrap text-ellipsis" <woot-button
@click.prevent="$emit('contact-panel-toggle')" variant="link"
> color-scheme="secondary"
<h3 class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
class="text-base inline-block leading-tight capitalize m-0 p-0 text-ellipsis overflow-hidden whitespace-nowrap text-slate-900 dark:text-slate-100" @click.prevent="$emit('contact-panel-toggle')"
> >
<span>{{ currentContact.name }}</span> <span
<fluent-icon class="text-base leading-tight text-slate-900 dark:text-slate-100"
v-if="!isHMACVerified" >
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')" {{ currentContact.name }}
size="14" </span>
class="text-yellow-600 dark:text-yellow-500 my-0 mx-0.5" </woot-button>
icon="warning" <fluent-icon
/> v-if="!isHMACVerified"
</h3> v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
</woot-button> size="14"
class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
icon="warning"
/>
</div>
<div <div
class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap" class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
> >

2
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View File

@@ -12,7 +12,7 @@
variant="smooth" variant="smooth"
size="tiny" size="tiny"
color-scheme="secondary" color-scheme="secondary"
class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border" class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[9.5rem] md:top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
:icon="isRightOrLeftIcon" :icon="isRightOrLeftIcon"
@click="onToggleContactPanel" @click="onToggleContactPanel"
/> />

50
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
View File

@@ -18,36 +18,38 @@
</div> </div>
<div class="mt-2 w-full"> <div class="mt-2 w-full">
<div v-if="showAvatar" class="flex items-center mb-2 gap-1"> <div v-if="showAvatar" class="flex items-center mb-2 gap-1.5">
<h3 <h3
class="text-base text-slate-800 dark:text-slate-100 capitalize whitespace-normal my-0" class="text-base text-slate-800 dark:text-slate-100 capitalize whitespace-normal my-0"
> >
{{ contact.name }} {{ contact.name }}
</h3> </h3>
<fluent-icon <div class="flex flex-row items-start gap-1">
v-if="contact.created_at" <fluent-icon
v-tooltip=" v-if="contact.created_at"
`${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime( v-tooltip.left="
contact.created_at `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
)}` contact.created_at
" )}`
icon="info" "
size="14" icon="info"
class="mt-0.5" size="14"
/> class="mt-0.5"
<a
:href="contactProfileLink"
class="fs-default"
target="_blank"
rel="noopener nofollow noreferrer"
>
<woot-button
size="tiny"
icon="open"
variant="clear"
color-scheme="secondary"
/> />
</a> <a
:href="contactProfileLink"
class="fs-default"
target="_blank"
rel="noopener nofollow noreferrer"
>
<woot-button
size="tiny"
icon="open"
variant="clear"
color-scheme="secondary"
/>
</a>
</div>
</div> </div>
<p v-if="additionalAttributes.description" class="break-words"> <p v-if="additionalAttributes.description" class="break-words">