Address some coderabbitai comments

* Pass id for key instead of index in AlkemioAvatar
* Remove unused forwardRef

Also the GroupMembersDetailsAvatarContainer is deleted as it has a lot
of unused functionality and some unused styles are deleted.

src/core/ui/image/AlkemioAvatar.tsx

@@ -1,6 +1,6 @@
 import UserPopUp from '@/domain/community/user/userPopUp/UserPopUp';
 import { Box, Tooltip } from '@mui/material';
-import { ReactNode, forwardRef, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ImageFadeIn from './ImageFadeIn';
 
@@ -14,9 +14,9 @@ interface AvatarProps {
  * @deprecated
  * TODO Replace with MUI Avatar
  */
-export const AlkemioAvatar = forwardRef(({ src, name, userId }: AvatarProps, ref) => {
+export const AlkemioAvatar = ({ src, name, userId }: AvatarProps) => {
   const { t } = useTranslation();
-  const [isPopUpShown, setIsPopUpShown] = useState<boolean>(false);
+  const [isPopUpShown, setIsPopUpShown] = useState(false);
   const [hasFailedToLoad, setHasFailedToLoad] = useState(false);
 
   useEffect(() => {
@@ -37,7 +37,6 @@ export const AlkemioAvatar = forwardRef(({ src, name, userId }: AvatarProps, ref
 
   return (
     <Box
-      ref={ref}
       sx={{
         width: 40,
         height: 40,
@@ -72,4 +71,4 @@ export const AlkemioAvatar = forwardRef(({ src, name, userId }: AvatarProps, ref
       {isPopUpShown && <UserPopUp id={userId} onHide={() => setIsPopUpShown(false)} />}
     </Box>
   );
-});
+};

src/domain/community/user/userPopUp/UserPopUp.tsx

@@ -83,22 +83,11 @@ const useUserPopUpStyles = makeStyles(theme => ({
       padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
     },
   },
-  marginBottom: {
-    marginBottom: theme.spacing(2),
-  },
-  refRow: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-  refDiv: {
-    marginBottom: theme.spacing(1),
-  },
 }));
 
 type UserPopUpProps = {
   id: string;
   onHide: () => void;
-  terms?: Array<string>;
 };
 
 const getStringOfNames = (arr: string[]) => arr.join(', ');

src/domain/platform/admin/components/Group/GroupMembersDetails.tsx

@@ -2,11 +2,10 @@ import { User } from '@/core/apollo/generated/graphql-schema';
 import { AlkemioAvatar } from '@/core/ui/image/AlkemioAvatar';
 import WrapperTypography from '@/core/ui/typography/deprecated/WrapperTypography';
 import { UserAvatarsProvider } from '@/domain/community/user/containers/UserAvatarsProvider/UserAvatarsProvider';
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import GroupMembersDetailsAvatarContainer from './GroupMembersDetailsAvatarContainer';
 
 interface GroupMembersDetailsProps {
   members: User[];
@@ -23,11 +22,22 @@ export const GroupMembersDetails: FC<GroupMembersDetailsProps> = ({ members, edi
           const avatars = populated;
           return (
             <>
-              <GroupMembersDetailsAvatarContainer title={''}>
-                {avatars.map((u, i) => (
-                  <AlkemioAvatar key={i} src={u.profile.visual?.uri} name={u.profile.displayName} userId={u.id} />
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  flexGrow: 1,
+                  pb: 3,
+                  flexWrap: 'wrap',
+                  gap: 1,
+                  bgcolor: 'background.default',
+                  borderRadius: 1,
+                }}
+              >
+                {avatars.map(u => (
+                  <AlkemioAvatar key={u.id} src={u.profile.visual?.uri} name={u.profile.displayName} userId={u.id} />
                 ))}
-              </GroupMembersDetailsAvatarContainer>
+              </Box>
               <div style={{ flexBasis: '100%' }} />
               {members.length - populated.length > 0 && (
                 <WrapperTypography variant="h3" as="h3" color="positive">