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

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>