diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationList/ConversationListHeader.vue b/app/javascript/dashboard/components-next/Conversation/ConversationList/ConversationListHeader.vue
index 0e51855f5..ead829f05 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationList/ConversationListHeader.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationList/ConversationListHeader.vue
@@ -28,7 +28,9 @@ const emit = defineEmits([
   <div
     class="flex items-center justify-between gap-2 pt-4 pb-4 ltr:pl-6 rtl:pr-6 ltr:pr-5 rtl:pl-5"
   >
-    <h4 class="text-base font-semibold leading-5 text-n-slate-12">
+    <h4
+      class="min-w-0 text-base font-semibold leading-5 truncate text-n-slate-12"
+    >
       {{ title }}
     </h4>
     <div class="flex items-center gap-2">
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationList/story/ConversationListHeader.story.vue b/app/javascript/dashboard/components-next/Conversation/ConversationList/story/ConversationListHeader.story.vue
index fc9bdabf2..ae06e0fa4 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationList/story/ConversationListHeader.story.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationList/story/ConversationListHeader.story.vue
@@ -31,7 +31,7 @@ const updateActiveOrdering = newOrdering => {
           title="Conversations"
           :active-status="activeStatus"
           :active-ordering="activeOrdering"
-          class="w-[400px]"
+          class="max-w-[400px] w-full"
           @filter="filter"
           @update:active-status="updateActiveStatus"
           @update:active-ordering="updateActiveOrdering"