Group misc UI fixes (#2208)

* fix: group actions positioning

* fix: project tags aligned to the right, fix gap

* fix: edit project user / group access button text "save"

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx

@@ -70,12 +70,12 @@ const StyledCounterDescription = styled('span')(({ theme }) => ({
     marginLeft: theme.spacing(1),
 }));
 
-const ProjectBadgeContainer = styled('div')(() => ({
+const ProjectBadgeContainer = styled('div')(({ theme }) => ({
     maxWidth: '50%',
-}));
-
-const StyledBadge = styled(Badge)(() => ({
-    marginRight: 0.5,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: theme.spacing(0.5),
+    flexWrap: 'wrap',
 }));
 
 interface IGroupCardProps {
@@ -122,7 +122,7 @@ export const GroupCard = ({ group }: IGroupCardProps) => {
                                         placement="bottom-end"
                                         describeChild
                                     >
-                                        <StyledBadge
+                                        <Badge
                                             onClick={e => {
                                                 e.preventDefault();
                                                 navigate(
@@ -133,7 +133,7 @@ export const GroupCard = ({ group }: IGroupCardProps) => {
                                             icon={<TopicOutlinedIcon />}
                                         >
                                             {project}
-                                        </StyledBadge>
+                                        </Badge>
                                     </Tooltip>
                                 ))}
                                 elseShow={

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx

@@ -16,6 +16,7 @@ import { Link } from 'react-router-dom';
 const StyledActions = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'center',
+    transform: 'translate3d(8px, -6px, 0)',
 }));
 
 const StyledPopover = styled(Popover)(({ theme }) => ({

frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx

@@ -404,7 +404,7 @@ export const ProjectAccessAssign = ({
                             color="primary"
                             disabled={!isValid}
                         >
-                            Assign {entityType}
+                            {edit ? 'Save' : `Assign ${entityType}`}
                         </Button>
                         <StyledCancelButton onClick={() => navigate(GO_BACK)}>
                             Cancel