From e45b96a506f41467295dd1674ab0a3cdb5e95f60 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Wed, 15 Apr 2026 13:06:44 +0330
Subject: [PATCH] refactor(ChatsCard): enhance layout and styling for better
 responsiveness

- Updated the ChatsCard component to improve layout and styling, ensuring better responsiveness.
- Adjusted class names for flex properties and truncation to enhance visual presentation of chat details.
- Ensured proper handling of unread message indicators and improved the rendering of last message timestamps.
---
 src/app/(home)/_components/chats-card.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

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)}