From 59c24b9ccdd134b9cffa1818937ebd4653885cb7 Mon Sep 17 00:00:00 2001
From: Boris Bera <beraboris@gmail.com>
Date: Sun, 12 Nov 2023 11:21:35 -0500
Subject: [PATCH 1/2] Scale MembersListCard children based on container

Signed-off-by: Boris Bera <beraboris@gmail.com>
---
 .changeset/fresh-seahorses-glow.md            |   5 +
 .../Group/MembersList/MembersListCard.tsx     | 119 ++++++++++--------
 2 files changed, 70 insertions(+), 54 deletions(-)
 create mode 100644 .changeset/fresh-seahorses-glow.md

diff --git a/.changeset/fresh-seahorses-glow.md b/.changeset/fresh-seahorses-glow.md
new file mode 100644
index 0000000000..ff42181c5d
--- /dev/null
+++ b/.changeset/fresh-seahorses-glow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Fix issue where members inside of `<EntityMembersListCard>` would be rendered as squished when the card itself was shrunk down.
diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index 701feb0b73..ccb3f1b705 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -61,6 +61,13 @@ const useStyles = makeStyles((theme: Theme) =>
       flex: '1',
       minWidth: '0px',
     },
+    cardGrid: {
+      display: 'grid',
+      gap: theme.spacing(1.5),
+      gridTemplateColumns: `repeat(auto-fit, minmax(auto, ${theme.spacing(
+        34,
+      )}px))`,
+    },
   }),
 );
 
@@ -73,49 +80,47 @@ const MemberComponent = (props: { member: UserEntity }) => {
   const displayName = profile?.displayName ?? metaName;
 
   return (
-    <Grid item container xs={12} sm={6} md={4} xl={2}>
-      <Box className={classes.card}>
+    <Box className={classes.card}>
+      <Box
+        display="flex"
+        flexDirection="column"
+        m={3}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Avatar
+          displayName={displayName}
+          picture={profile?.picture}
+          customStyles={{
+            position: 'absolute',
+            top: '-2rem',
+          }}
+        />
         <Box
-          display="flex"
-          flexDirection="column"
-          m={3}
-          alignItems="center"
-          justifyContent="center"
+          pt={2}
+          sx={{
+            width: '100%',
+          }}
+          textAlign="center"
         >
-          <Avatar
-            displayName={displayName}
-            picture={profile?.picture}
-            customStyles={{
-              position: 'absolute',
-              top: '-2rem',
-            }}
-          />
-          <Box
-            pt={2}
-            sx={{
-              width: '100%',
-            }}
-            textAlign="center"
-          >
-            <Typography variant="h6">
-              <EntityRefLink
-                data-testid="user-link"
-                entityRef={props.member}
-                title={displayName}
-              />
-            </Typography>
-            {profile?.email && (
-              <Link to={`mailto:${profile.email}`}>
-                <OverflowTooltip text={profile.email} />
-              </Link>
-            )}
-            {description && (
-              <Typography variant="subtitle2">{description}</Typography>
-            )}
-          </Box>
+          <Typography variant="h6">
+            <EntityRefLink
+              data-testid="user-link"
+              entityRef={props.member}
+              title={displayName}
+            />
+          </Typography>
+          {profile?.email && (
+            <Link to={`mailto:${profile.email}`}>
+              <OverflowTooltip text={profile.email} />
+            </Link>
+          )}
+          {description && (
+            <Typography variant="subtitle2">{description}</Typography>
+          )}
         </Box>
       </Box>
-    </Grid>
+    </Box>
   );
 };
 
@@ -134,6 +139,7 @@ export const MembersListCard = (props: {
   pageSize?: number;
   showAggregateMembersToggle?: boolean;
 }) => {
+  const classes = useStyles();
   const {
     memberDisplayTitle = 'Members',
     pageSize = 50,
@@ -219,6 +225,25 @@ export const MembersListCard = (props: {
     />
   );
 
+  let memberList: React.JSX.Element;
+  if (members && members.length > 0) {
+    memberList = (
+      <Box className={classes.cardGrid}>
+        {members.slice(pageSize * (page - 1), pageSize * page).map(member => (
+          <MemberComponent member={member} key={member.metadata.uid} />
+        ))}
+      </Box>
+    );
+  } else {
+    memberList = (
+      <Box p={2}>
+        <Typography>
+          This group has no {memberDisplayTitle.toLocaleLowerCase()}.
+        </Typography>
+      </Box>
+    );
+  }
+
   return (
     <Grid item className={classes.root}>
       <InfoCard
@@ -247,21 +272,7 @@ export const MembersListCard = (props: {
         {showAggregateMembers && loadingDescendantMembers ? (
           <Progress />
         ) : (
-          <Grid container spacing={3}>
-            {members && members.length > 0 ? (
-              members
-                .slice(pageSize * (page - 1), pageSize * page)
-                .map(member => (
-                  <MemberComponent member={member} key={member.metadata.uid} />
-                ))
-            ) : (
-              <Box p={2}>
-                <Typography>
-                  This group has no {memberDisplayTitle.toLocaleLowerCase()}.
-                </Typography>
-              </Box>
-            )}
-          </Grid>
+          memberList
         )}
       </InfoCard>
     </Grid>

From e1132fe2b94834afb2b441daf1beb0e748e1c7d4 Mon Sep 17 00:00:00 2001
From: Boris Bera <beraboris@gmail.com>
Date: Sun, 26 Nov 2023 13:40:11 -0500
Subject: [PATCH 2/2] Fix conflicts with #21304 / master branch

Signed-off-by: Boris Bera <beraboris@gmail.com>
---
 .../Group/MembersList/MembersListCard.tsx     | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index ccb3f1b705..8967e7cdd7 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -61,13 +61,6 @@ const useStyles = makeStyles((theme: Theme) =>
       flex: '1',
       minWidth: '0px',
     },
-    cardGrid: {
-      display: 'grid',
-      gap: theme.spacing(1.5),
-      gridTemplateColumns: `repeat(auto-fit, minmax(auto, ${theme.spacing(
-        34,
-      )}px))`,
-    },
   }),
 );
 
@@ -124,13 +117,20 @@ const MemberComponent = (props: { member: UserEntity }) => {
   );
 };
 
-const useListStyles = makeStyles(() => ({
+const useListStyles = makeStyles(theme => ({
   root: {
     height: '100%',
   },
   cardContent: {
     overflow: 'auto',
   },
+  memberList: {
+    display: 'grid',
+    gap: theme.spacing(1.5),
+    gridTemplateColumns: `repeat(auto-fit, minmax(auto, ${theme.spacing(
+      34,
+    )}px))`,
+  },
 }));
 
 /** @public */
@@ -139,7 +139,6 @@ export const MembersListCard = (props: {
   pageSize?: number;
   showAggregateMembersToggle?: boolean;
 }) => {
-  const classes = useStyles();
   const {
     memberDisplayTitle = 'Members',
     pageSize = 50,
@@ -228,7 +227,7 @@ export const MembersListCard = (props: {
   let memberList: React.JSX.Element;
   if (members && members.length > 0) {
     memberList = (
-      <Box className={classes.cardGrid}>
+      <Box className={classes.memberList}>
         {members.slice(pageSize * (page - 1), pageSize * page).map(member => (
           <MemberComponent member={member} key={member.metadata.uid} />
         ))}