From 89c6b3609007119a4e21ef1ed951404f640e918c Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 8 May 2024 05:07:23 +0600
Subject: [PATCH] fix: activity word spacing (#5614)

---
 .../Activity/ActivityTopicTitles.tsx          | 10 +++++----
 .../TeamActivity/TeamActivityItem.tsx         | 22 ++++++++++---------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Activity/ActivityTopicTitles.tsx b/src/components/Activity/ActivityTopicTitles.tsx
index 94ea1f1cd..89337c7a7 100644
--- a/src/components/Activity/ActivityTopicTitles.tsx
+++ b/src/components/Activity/ActivityTopicTitles.tsx
@@ -12,12 +12,14 @@ export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
     <>
       {firstThreeTopics.map((topicTitle, index) => {
         return (
-          <span className="font-medium">
+          <span className="font-medium" key={`topic-${topicTitle}-${index}`}>
             <>
               {index > 0 && ', '}
               {index === firstThreeTopics.length - 1 &&
-                firstThreeTopics.length > 1 &&
-                'and '}
+              remainingTopics?.length === 0 &&
+              firstThreeTopics.length > 1
+                ? 'and '
+                : ''}
               {topicTitle}
             </>
           </span>
@@ -26,7 +28,7 @@ export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
 
       {remainingTopics?.length > 0 && (
         <>
-          &nbsp;and&nbsp;
+          , and&nbsp;
           <button
             className="font-medium underline underline-offset-2 hover:text-black"
             onClick={onSelectActivity}
diff --git a/src/components/TeamActivity/TeamActivityItem.tsx b/src/components/TeamActivity/TeamActivityItem.tsx
index 606e51f3f..c89182d75 100644
--- a/src/components/TeamActivity/TeamActivityItem.tsx
+++ b/src/components/TeamActivity/TeamActivityItem.tsx
@@ -67,7 +67,7 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
         src={userAvatar}
         alt={user.name}
       />
-      <span className="font-medium">{user?.name || 'Unknown'}</span>{' '}
+      <span className="font-medium">{user?.name || 'Unknown'}</span>
     </>
   );
 
@@ -79,33 +79,35 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
     return (
       <li
         key={user._id}
-        className="flex flex-wrap items-center gap-1 rounded-md border px-2 py-2.5 text-sm"
+        className="flex flex-wrap items-center gap-y-1 rounded-md border px-2 py-2.5 text-sm"
       >
         {actionType === 'in_progress' && (
           <>
-            {username} started{' '}
+            {username}&nbsp;started&nbsp;
             <ActivityTopicTitles
               topicTitles={topicTitles || []}
               onSelectActivity={() => onTopicClick?.(activity)}
-            />{' '}
-            in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
+            />
+            &nbsp;in&nbsp;{resourceLink(activity)}&nbsp;
+            {timeAgo(activity.updatedAt)}
           </>
         )}
 
         {actionType === 'done' && (
           <>
-            {username} completed{' '}
+            {username}&nbsp;completed&nbsp;
             <ActivityTopicTitles
               topicTitles={topicTitles || []}
               onSelectActivity={() => onTopicClick?.(activity)}
-            />{' '}
-            in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
+            />
+            &nbsp;in&nbsp;{resourceLink(activity)}&nbsp;
+            {timeAgo(activity.updatedAt)}
           </>
         )}
         {actionType === 'answered' && (
           <>
-            {username} answered {topicCount} question
-            {topicCount > 1 ? 's' : ''} in {resourceLink(activity)}{' '}
+            {username}&nbsp;answered {topicCount} question
+            {topicCount > 1 ? 's' : ''} in&nbsp;{resourceLink(activity)}&nbsp;
             {timeAgo(activity.updatedAt)}
           </>
         )}