fix: activity word spacing (#5614)

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 &&
+              remainingTopics?.length === 0 &&
-                'and '}
+              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}

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
+            {username}&nbsp;answered {topicCount} question
-            {topicCount > 1 ? 's' : ''} in {resourceLink(activity)}{' '}
+            {topicCount > 1 ? 's' : ''} in&nbsp;{resourceLink(activity)}&nbsp;
             {timeAgo(activity.updatedAt)}
           </>
         )}