From 41a2577696b06f2fb03bf15fb28e524ca0748ca1 Mon Sep 17 00:00:00 2001
From: James Dominguez <keppy.rb@gmail.com>
Date: Tue, 19 Mar 2024 14:16:21 -0700
Subject: [PATCH] fix: #617 members list display logic for boards with more
 than 5 members

---
 client/src/components/Memberships/Memberships.jsx      | 10 +++++++++-
 .../src/components/Memberships/Memberships.module.scss |  9 ++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Memberships/Memberships.jsx b/client/src/components/Memberships/Memberships.jsx
index d15a0d6..db10f12 100644
--- a/client/src/components/Memberships/Memberships.jsx
+++ b/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}
diff --git a/client/src/components/Memberships/Memberships.module.scss b/client/src/components/Memberships/Memberships.module.scss
index 7f726ce..84e7d55 100644
--- a/client/src/components/Memberships/Memberships.module.scss
+++ b/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;
   }
 }