diff --git a/package.json b/package.json
index 6787571..b16fa93 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
diff --git a/src/components/mail/cheaps/MessageCheap.tsx b/src/components/mail/cheaps/MessageCheap.tsx
index 8aa1476..872d274 100644
--- a/src/components/mail/cheaps/MessageCheap.tsx
+++ b/src/components/mail/cheaps/MessageCheap.tsx
@@ -58,20 +58,20 @@ const MessageCheap = ({ email, active, selected, participants, onClick, onSelect
             <Checkbox checked={selected} onClick={handleSelect} />
           </div>
         </div>
-        <div className="flex flex-col w-full">
-          <div className={`flex flex-row w-full justify-between ${isHighlighted ? 'text-primary' : ''}`}>
-            <div className="flex flex-row gap-1 w-full max-w-[150px] items-center">
-              {!email.read && <div className="h-2 w-2 rounded-full bg-primary" />}
+        <div className="flex flex-col w-full min-w-0">
+          <div className={`flex flex-row w-full justify-between gap-3 ${isHighlighted ? 'text-primary' : ''}`}>
+            <div className="flex flex-row gap-1 min-w-0 flex-1 items-center">
+              {!email.read && <div className="h-2 w-2 rounded-full bg-primary flex-shrink-0" />}
               <p className="font-semibold truncate">{displayName}</p>
             </div>
-            <div>
-              <p className={`text-sm font-medium ${isHighlighted ? 'text-primary' : 'text-gray-50'}`}>
+            <div className="flex-shrink-0">
+              <p className={`text-sm font-medium whitespace-nowrap ${isHighlighted ? 'text-primary' : 'text-gray-50'}`}>
                 {email.createdAt}
               </p>
             </div>
           </div>
           <p className={`text-sm font-semibold ${isHighlighted ? 'text-primary' : ''}`}>{email.subject}</p>
-          <p className={`text-sm ${isHighlighted ? 'text-primary/80' : 'text-gray-50'}`}>{email.body}</p>
+          <p className={`text-sm line-clamp-2 ${isHighlighted ? 'text-primary/80' : 'text-gray-50'}`}>{email.body}</p>
         </div>
       </div>
     </button>
diff --git a/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap b/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap
index cc3b59c..f5e5362 100644
--- a/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap
+++ b/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap
@@ -57,16 +57,16 @@ exports[`MessageCheap > should match snapshot 1`] = `
             </div>
           </div>
           <div
-            class="flex flex-col w-full"
+            class="flex flex-col w-full min-w-0"
           >
             <div
-              class="flex flex-row w-full justify-between "
+              class="flex flex-row w-full justify-between gap-3 "
             >
               <div
-                class="flex flex-row gap-1 w-full max-w-[150px] items-center"
+                class="flex flex-row gap-1 min-w-0 flex-1 items-center"
               >
                 <div
-                  class="h-2 w-2 rounded-full bg-primary"
+                  class="h-2 w-2 rounded-full bg-primary flex-shrink-0"
                 />
                 <p
                   class="font-semibold truncate"
@@ -74,9 +74,11 @@ exports[`MessageCheap > should match snapshot 1`] = `
                   John Doe
                 </p>
               </div>
-              <div>
+              <div
+                class="flex-shrink-0"
+              >
                 <p
-                  class="text-sm font-medium text-gray-50"
+                  class="text-sm font-medium whitespace-nowrap text-gray-50"
                 >
                   2024-01-15
                 </p>
@@ -88,7 +90,7 @@ exports[`MessageCheap > should match snapshot 1`] = `
               Test Subject
             </p>
             <p
-              class="text-sm text-gray-50"
+              class="text-sm line-clamp-2 text-gray-50"
             >
               This is a test email body
             </p>
@@ -150,16 +152,16 @@ exports[`MessageCheap > should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="flex flex-col w-full"
+          class="flex flex-col w-full min-w-0"
         >
           <div
-            class="flex flex-row w-full justify-between "
+            class="flex flex-row w-full justify-between gap-3 "
           >
             <div
-              class="flex flex-row gap-1 w-full max-w-[150px] items-center"
+              class="flex flex-row gap-1 min-w-0 flex-1 items-center"
             >
               <div
-                class="h-2 w-2 rounded-full bg-primary"
+                class="h-2 w-2 rounded-full bg-primary flex-shrink-0"
               />
               <p
                 class="font-semibold truncate"
@@ -167,9 +169,11 @@ exports[`MessageCheap > should match snapshot 1`] = `
                 John Doe
               </p>
             </div>
-            <div>
+            <div
+              class="flex-shrink-0"
+            >
               <p
-                class="text-sm font-medium text-gray-50"
+                class="text-sm font-medium whitespace-nowrap text-gray-50"
               >
                 2024-01-15
               </p>
@@ -181,7 +185,7 @@ exports[`MessageCheap > should match snapshot 1`] = `
             Test Subject
           </p>
           <p
-            class="text-sm text-gray-50"
+            class="text-sm line-clamp-2 text-gray-50"
           >
             This is a test email body
           </p>
diff --git a/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap b/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap
index e9bb95b..1eb42c3 100644
--- a/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap
+++ b/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap
@@ -53,16 +53,16 @@ exports[`TrayList > should match snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex flex-col w-full"
+                    class="flex flex-col w-full min-w-0"
                   >
                     <div
-                      class="flex flex-row w-full justify-between "
+                      class="flex flex-row w-full justify-between gap-3 "
                     >
                       <div
-                        class="flex flex-row gap-1 w-full max-w-[150px] items-center"
+                        class="flex flex-row gap-1 min-w-0 flex-1 items-center"
                       >
                         <div
-                          class="h-2 w-2 rounded-full bg-primary"
+                          class="h-2 w-2 rounded-full bg-primary flex-shrink-0"
                         />
                         <p
                           class="font-semibold truncate"
@@ -70,9 +70,11 @@ exports[`TrayList > should match snapshot 1`] = `
                           John Doe
                         </p>
                       </div>
-                      <div>
+                      <div
+                        class="flex-shrink-0"
+                      >
                         <p
-                          class="text-sm font-medium text-gray-50"
+                          class="text-sm font-medium whitespace-nowrap text-gray-50"
                         >
                           2024-01-15
                         </p>
@@ -84,7 +86,7 @@ exports[`TrayList > should match snapshot 1`] = `
                       Test Subject 1
                     </p>
                     <p
-                      class="text-sm text-gray-50"
+                      class="text-sm line-clamp-2 text-gray-50"
                     >
                       This is test email 1
                     </p>
@@ -132,13 +134,13 @@ exports[`TrayList > should match snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex flex-col w-full"
+                    class="flex flex-col w-full min-w-0"
                   >
                     <div
-                      class="flex flex-row w-full justify-between "
+                      class="flex flex-row w-full justify-between gap-3 "
                     >
                       <div
-                        class="flex flex-row gap-1 w-full max-w-[150px] items-center"
+                        class="flex flex-row gap-1 min-w-0 flex-1 items-center"
                       >
                         <p
                           class="font-semibold truncate"
@@ -146,9 +148,11 @@ exports[`TrayList > should match snapshot 1`] = `
                           Jane Smith
                         </p>
                       </div>
-                      <div>
+                      <div
+                        class="flex-shrink-0"
+                      >
                         <p
-                          class="text-sm font-medium text-gray-50"
+                          class="text-sm font-medium whitespace-nowrap text-gray-50"
                         >
                           2024-01-16
                         </p>
@@ -160,7 +164,7 @@ exports[`TrayList > should match snapshot 1`] = `
                       Test Subject 2
                     </p>
                     <p
-                      class="text-sm text-gray-50"
+                      class="text-sm line-clamp-2 text-gray-50"
                     >
                       This is test email 2
                     </p>
@@ -222,16 +226,16 @@ exports[`TrayList > should match snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="flex flex-col w-full"
+                  class="flex flex-col w-full min-w-0"
                 >
                   <div
-                    class="flex flex-row w-full justify-between "
+                    class="flex flex-row w-full justify-between gap-3 "
                   >
                     <div
-                      class="flex flex-row gap-1 w-full max-w-[150px] items-center"
+                      class="flex flex-row gap-1 min-w-0 flex-1 items-center"
                     >
                       <div
-                        class="h-2 w-2 rounded-full bg-primary"
+                        class="h-2 w-2 rounded-full bg-primary flex-shrink-0"
                       />
                       <p
                         class="font-semibold truncate"
@@ -239,9 +243,11 @@ exports[`TrayList > should match snapshot 1`] = `
                         John Doe
                       </p>
                     </div>
-                    <div>
+                    <div
+                      class="flex-shrink-0"
+                    >
                       <p
-                        class="text-sm font-medium text-gray-50"
+                        class="text-sm font-medium whitespace-nowrap text-gray-50"
                       >
                         2024-01-15
                       </p>
@@ -253,7 +259,7 @@ exports[`TrayList > should match snapshot 1`] = `
                     Test Subject 1
                   </p>
                   <p
-                    class="text-sm text-gray-50"
+                    class="text-sm line-clamp-2 text-gray-50"
                   >
                     This is test email 1
                   </p>
@@ -301,13 +307,13 @@ exports[`TrayList > should match snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="flex flex-col w-full"
+                  class="flex flex-col w-full min-w-0"
                 >
                   <div
-                    class="flex flex-row w-full justify-between "
+                    class="flex flex-row w-full justify-between gap-3 "
                   >
                     <div
-                      class="flex flex-row gap-1 w-full max-w-[150px] items-center"
+                      class="flex flex-row gap-1 min-w-0 flex-1 items-center"
                     >
                       <p
                         class="font-semibold truncate"
@@ -315,9 +321,11 @@ exports[`TrayList > should match snapshot 1`] = `
                         Jane Smith
                       </p>
                     </div>
-                    <div>
+                    <div
+                      class="flex-shrink-0"
+                    >
                       <p
-                        class="text-sm font-medium text-gray-50"
+                        class="text-sm font-medium whitespace-nowrap text-gray-50"
                       >
                         2024-01-16
                       </p>
@@ -329,7 +337,7 @@ exports[`TrayList > should match snapshot 1`] = `
                     Test Subject 2
                   </p>
                   <p
-                    class="text-sm text-gray-50"
+                    class="text-sm line-clamp-2 text-gray-50"
                   >
                     This is test email 2
                   </p>