84fd769570
# Pull Request Template ## Description This PR fixes a minor UI overflow issue in the conversation card, where the assignee name overflows when the inbox name is too long. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Screenshot **Before** <img width="424" height="88" alt="image" src="https://github.com/user-attachments/assets/4f6a73bb-2de6-4f42-9a01-e4e71c332721" /> **After** <img width="424" height="88" alt="image" src="https://github.com/user-attachments/assets/11d24f5f-94ec-4ad8-b9ad-5d3f101d26c1" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
33 lines
689 B
Vue
33 lines
689 B
Vue
<script>
|
|
import { getInboxClassByType } from 'dashboard/helper/inbox';
|
|
|
|
export default {
|
|
props: {
|
|
inbox: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
computed: {
|
|
computedInboxClass() {
|
|
const { phone_number: phoneNumber, channel_type: type } = this.inbox;
|
|
const classByType = getInboxClassByType(type, phoneNumber);
|
|
return classByType;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center text-n-slate-11 text-xs min-w-0">
|
|
<fluent-icon
|
|
class="ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
|
|
:icon="computedInboxClass"
|
|
size="12"
|
|
/>
|
|
<span class="truncate">
|
|
{{ inbox.name }}
|
|
</span>
|
|
</div>
|
|
</template>
|