From 84fd7695704ce15e2447c84637fcf2a318fc6b08 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 5 Aug 2025 12:22:29 +0530
Subject: [PATCH] fix: Overflow issue with conversation card (#12104)

# 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
---
 .../dashboard/components/widgets/InboxName.vue     | 10 +++++-----
 .../widgets/conversation/ConversationCard.vue      | 14 +++++++++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index 693162f95..cf48b0837 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -19,14 +19,14 @@ export default {
 </script>
 
 <template>
-  <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-n-slate-11 text-xs my-0 mx-2.5"
-  >
+  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
     <fluent-icon
-      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      class="ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
       :icon="computedInboxClass"
       size="12"
     />
-    {{ inbox.name }}
+    <span class="truncate">
+      {{ inbox.name }}
+    </span>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index e87bea268..62a0c41c0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -299,17 +299,21 @@ export default {
     <div
       class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
     >
-      <div class="flex justify-between conversation-card--meta">
-        <InboxName v-if="showInboxName" :inbox="inbox" />
-        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
+      <div class="flex items-center conversation-card--meta min-w-0">
+        <InboxName
+          v-if="showInboxName"
+          :inbox="inbox"
+          class="flex-1 min-w-0 mx-2"
+        />
+        <div class="flex items-center gap-2 flex-shrink-0">
           <span
             v-if="showAssignee && assignee.name"
-            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
+            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center truncate"
           >
             <fluent-icon icon="person" size="12" class="text-n-slate-11" />
             {{ assignee.name }}
           </span>
-          <PriorityMark :priority="chat.priority" />
+          <PriorityMark :priority="chat.priority" class="flex-shrink-0" />
         </div>
       </div>
       <h4