diff --git a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
index 5b70307fe..b77477bd2 100644
--- a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
@@ -89,7 +89,7 @@ const files = computed(() => {
   </div>
 
   <div v-if="files.length" :class="classToApply">
-    <div className="grid grid-cols-2 xl:grid-cols-3 gap-3">
+    <div className="grid grid-cols-1 2xl:grid-cols-2 gap-3">
       <FileChip
         v-for="attachment in files"
         :key="attachment.id"
diff --git a/app/javascript/dashboard/components-next/message/chips/File.vue b/app/javascript/dashboard/components-next/message/chips/File.vue
index 8638fd15d..10ef74943 100644
--- a/app/javascript/dashboard/components-next/message/chips/File.vue
+++ b/app/javascript/dashboard/components-next/message/chips/File.vue
@@ -49,8 +49,8 @@ const displayFileName = computed(() => {
       : str;
 
   return fileType.value
-    ? `${truncatedName(name, 14, true)}.${fileType.value}`
-    : truncatedName(name, 16, false);
+    ? `${truncatedName(name, 12, true)}.${fileType.value}`
+    : truncatedName(name, 14, false);
 });
 
 const textColorClass = computed(() => {
@@ -83,7 +83,7 @@ const textColorClass = computed(() => {
   >
     <FileIcon class="flex-shrink-0" :file-type="fileType" />
     <span
-      class="flex-1 min-w-0 text-sm max-w-36"
+      class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-sm max-w-36"
       :title="fileName"
       :class="textColorClass"
     >