fix: #617 members list display logic for boards with more than 5 members

client/src/components/Memberships/Memberships.jsx

@@ -32,10 +32,15 @@ const Memberships = React.memo(
     const AddPopup = usePopup(AddStep);
     const ActionsPopup = usePopup(ActionsStep);
 
+    // Number of display slots available for showing user icons
+    const userDisplaySlots = 5;
+    const shownUsers = items.slice(0, userDisplaySlots);
+    const remainingUsers = items.slice(userDisplaySlots);
+
     return (
       <>
         <span className={styles.users}>
-          {items.map((item) => (
+          {shownUsers.map((item) => (
             <span key={item.id} className={styles.user}>
               <ActionsPopup
                 membership={item}
@@ -63,6 +68,9 @@ const Memberships = React.memo(
             </span>
           ))}
         </span>
+        {remainingUsers && (
+          <span className={styles.moreUsersIndicator}>+ {remainingUsers.length} other Members</span>
+        )}
         {canEdit && (
           <AddPopup
             users={allUsers}

client/src/components/Memberships/Memberships.module.scss

@@ -25,6 +25,13 @@
 
   .users {
     display: inline-block;
-    vertical-align: top;
+    vertical-align: middle;
+  }
+
+  .moreUsersIndicator {
+    margin-right: 15px;
+    margin-left: 8px;
+    color: white;
+    font-size: 12px;
   }
 }