diff --git a/src/app/(home)/_components/chats-card.tsx b/src/app/(home)/_components/chats-card.tsx
index 6202d3d..ec3e0b2 100644
--- a/src/app/(home)/_components/chats-card.tsx
+++ b/src/app/(home)/_components/chats-card.tsx
@@ -38,25 +38,30 @@ export async function ChatsCard() {
                 />
               </div>
 
-              <div className="relative flex-grow">
-                <h3 className="font-medium text-dark dark:text-white">
+              <div
+                className={cn(
+                  "relative flex-grow min-w-0",
+                  chat.unreadCount && "pr-10",
+                )}
+              >
+                <h3 className="truncate font-medium text-dark dark:text-white">
                   {chat.name}
                 </h3>
 
-                <div className="flex flex-wrap items-center gap-2">
+                <div className="flex min-w-0 items-center gap-2">
                   <span
                     className={cn(
-                      "truncate text-sm font-medium dark:text-dark-5 xl:max-w-[8rem]",
+                      "block min-w-0 flex-1 truncate text-sm font-medium dark:text-dark-5",
                       chat.unreadCount && "text-dark-4 dark:text-dark-6",
                     )}
                   >
                     {chat.lastMessage.content}
                   </span>
 
-                  <DotIcon />
+                  <DotIcon className="shrink-0" />
 
                   <time
-                    className="text-xs"
+                    className="shrink-0 text-xs"
                     dateTime={chat.lastMessage.timestamp}
                   >
                     {formatMessageTime(chat.lastMessage.timestamp)}