From c8826ba9859e31c26fad8f73e94362ce916e57c6 Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Thu, 13 Feb 2025 15:11:30 -0600
Subject: [PATCH 1/4] Implement a tooltip for the surplus icon with the names
 of the extra avatars.

---
 web-ui/src/components/kudos/PublicKudosCard.jsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/web-ui/src/components/kudos/PublicKudosCard.jsx b/web-ui/src/components/kudos/PublicKudosCard.jsx
index dc554602d8..9afc65105d 100644
--- a/web-ui/src/components/kudos/PublicKudosCard.jsx
+++ b/web-ui/src/components/kudos/PublicKudosCard.jsx
@@ -66,8 +66,22 @@ const KudosCard = ({ kudos }) => {
       );
     }
 
+    const multiTooltip = (num, list) => {
+      let tooltip = "";
+      let prefix = "";
+      for (let member of list.slice(-num)) {
+        tooltip += prefix + `${member.firstName} ${member.lastName}`;
+        prefix = ", ";
+      }
+      return <Tooltip arrow key="multi-member-tooltip" title={tooltip}>
+               {`+${num}`}
+             </Tooltip>;
+    };
+
     return (
-      <AvatarGroup max={4}>
+      <AvatarGroup max={4}
+                   renderSurplus={(extra) => multiTooltip(
+                                               extra, kudos.recipientMembers)}>
         {kudos.recipientMembers.map((member) => (
           <Tooltip
             arrow

From b50e0eb4e679653498d224886ef816a332332c2b Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Thu, 13 Feb 2025 15:20:59 -0600
Subject: [PATCH 2/4] Use the same surplus renderer for team kudos.

---
 .../src/components/kudos/PublicKudosCard.jsx  | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/web-ui/src/components/kudos/PublicKudosCard.jsx b/web-ui/src/components/kudos/PublicKudosCard.jsx
index 9afc65105d..1ce33777e2 100644
--- a/web-ui/src/components/kudos/PublicKudosCard.jsx
+++ b/web-ui/src/components/kudos/PublicKudosCard.jsx
@@ -51,6 +51,18 @@ const KudosCard = ({ kudos }) => {
 
   const sender = selectProfile(state, kudos.senderId);
 
+  const multiTooltip = (num, list) => {
+    let tooltip = "";
+    let prefix = "";
+    for (let member of list.slice(-num)) {
+      tooltip += prefix + `${member.firstName} ${member.lastName}`;
+      prefix = ", ";
+    }
+    return <Tooltip arrow key="multi-member-tooltip" title={tooltip}>
+             {`+${num}`}
+           </Tooltip>;
+  };
+
   const getRecipientComponent = useCallback(() => {
     if (kudos.recipientTeam) {
       return (
@@ -66,18 +78,6 @@ const KudosCard = ({ kudos }) => {
       );
     }
 
-    const multiTooltip = (num, list) => {
-      let tooltip = "";
-      let prefix = "";
-      for (let member of list.slice(-num)) {
-        tooltip += prefix + `${member.firstName} ${member.lastName}`;
-        prefix = ", ";
-      }
-      return <Tooltip arrow key="multi-member-tooltip" title={tooltip}>
-               {`+${num}`}
-             </Tooltip>;
-    };
-
     return (
       <AvatarGroup max={4}
                    renderSurplus={(extra) => multiTooltip(
@@ -114,7 +114,9 @@ const KudosCard = ({ kudos }) => {
         <CardContent>
           <Typography variant="body1"><em>{kudos.message}</em></Typography>
           {kudos.recipientTeam && (
-      <AvatarGroup max={12}>
+      <AvatarGroup max={12}
+                   renderSurplus={(extra) => multiTooltip(
+                                               extra, kudos.recipientMembers)}>
         {kudos.recipientMembers.map((member) => (
           <Tooltip
             arrow

From efa3d23ecc01a02ea703d875d3bf222db568b787 Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Fri, 14 Feb 2025 07:17:11 -0600
Subject: [PATCH 3/4] Remove unnecessary (and possibly duplicate key).

---
 web-ui/src/components/kudos/PublicKudosCard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-ui/src/components/kudos/PublicKudosCard.jsx b/web-ui/src/components/kudos/PublicKudosCard.jsx
index 1ce33777e2..d28eca4f8c 100644
--- a/web-ui/src/components/kudos/PublicKudosCard.jsx
+++ b/web-ui/src/components/kudos/PublicKudosCard.jsx
@@ -58,7 +58,7 @@ const KudosCard = ({ kudos }) => {
       tooltip += prefix + `${member.firstName} ${member.lastName}`;
       prefix = ", ";
     }
-    return <Tooltip arrow key="multi-member-tooltip" title={tooltip}>
+    return <Tooltip arrow title={tooltip}>
              {`+${num}`}
            </Tooltip>;
   };

From 14cd1d9add399e6a837f98031f8e1b6b29a05e25 Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Fri, 14 Feb 2025 10:06:26 -0600
Subject: [PATCH 4/4] Wrap text in Typography to avoid React Mui warning.

---
 web-ui/src/components/kudos/PublicKudosCard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-ui/src/components/kudos/PublicKudosCard.jsx b/web-ui/src/components/kudos/PublicKudosCard.jsx
index d28eca4f8c..08e677170c 100644
--- a/web-ui/src/components/kudos/PublicKudosCard.jsx
+++ b/web-ui/src/components/kudos/PublicKudosCard.jsx
@@ -59,7 +59,7 @@ const KudosCard = ({ kudos }) => {
       prefix = ", ";
     }
     return <Tooltip arrow title={tooltip}>
-             {`+${num}`}
+             <Typography>{`+${num}`}</Typography>
            </Tooltip>;
   };