fixes

Author: lucasgoral

public/locales/en.json

@@ -143,7 +143,7 @@
     "subtitle": "Fetching data..."
   },
   "MemberTable": {
-    "columnEmailHeader": "Email",
+    "columnNameHeader": "Name",
     "columnRoleHeader": "Role",
     "columnTypeHeader": "Type",
     "columnNamespaceHeader": "Namespace"

src/components/Members/EditMembers.tsx

@@ -111,26 +111,27 @@ export const EditMembers: FC<EditMembersProps> = ({
 
   return (
     <FlexBox direction="Column" gap={8}>
-      <Button
-        className={styles.addButton}
-        data-testid="add-member-button"
-        design="Emphasized"
-        icon={'sap-icon://add-employee'}
-        onClick={handleOpenMemberFormDialog}
-      >
-        {t('EditMembers.addButton')}
-      </Button>
-      {type !== 'project' && (
+      <FlexBox gap={8} justifyContent="SpaceBetween">
         <Button
           className={styles.addButton}
-          data-testid="import-members-button"
-          design="Transparent"
-          icon={'upload'}
-          onClick={handleOpenImportDialog}
+          data-testid="add-member-button"
+          design="Emphasized"
+          icon={'sap-icon://add-employee'}
+          onClick={handleOpenMemberFormDialog}
         >
-          {t('ImportMembersDialog.dialogTitle')}
+          {t('EditMembers.addButton')}
         </Button>
-      )}
+        {type !== 'project' && (
+          <Button
+            className={styles.narrowButton}
+            data-testid="import-members-button"
+            icon={'upload'}
+            onClick={handleOpenImportDialog}
+          >
+            {t('ImportMembersDialog.dialogTitle')}
+          </Button>
+        )}
+      </FlexBox>
       <AddEditMemberDialog
         open={isMemberDialogOpen}
         existingMembers={members}

src/components/Members/MemberTable.tsx

@@ -41,7 +41,7 @@ export const MemberTable: FC<MemberTableProps> = ({
 
   const columns: AnalyticalTableColumnDefinition[] = [
     {
-      Header: t('MemberTable.columnEmailHeader'),
+      Header: t('MemberTable.columnNameHeader'),
       accessor: 'email',
     },
 
@@ -70,36 +70,30 @@ export const MemberTable: FC<MemberTableProps> = ({
     },
   ];
 
-  if (onEditMember) {
+  if (onEditMember && onDeleteMember) {
     columns.push({
       Header: '',
       id: 'edit',
-      width: 50,
+      width: 100,
       Cell: (instance: CellInstance) => (
-        <Button
-          icon="edit"
-          onClick={() => {
-            const selectedMember = instance.cell.row.original._member;
-            onEditMember(selectedMember);
-          }}
-        />
-      ),
-    });
-  }
-
-  if (onDeleteMember) {
-    columns.push({
-      Header: '',
-      id: 'delete',
-      width: 50,
-      Cell: (instance: CellInstance) => (
-        <Button
-          icon="delete"
-          onClick={() => {
-            const selectedMemberEmail = instance.cell.row.original.email;
-            onDeleteMember(selectedMemberEmail);
-          }}
-        />
+        <FlexBox gap={'0.5rem'} justifyContent={'SpaceBetween'}>
+          <Button
+            icon="edit"
+            design="Transparent"
+            onClick={() => {
+              const selectedMember = instance.cell.row.original._member;
+              onEditMember(selectedMember);
+            }}
+          />
+          <Button
+            design="Transparent"
+            icon="delete"
+            onClick={() => {
+              const selectedMemberEmail = instance.cell.row.original.email;
+              onDeleteMember(selectedMemberEmail);
+            }}
+          />
+        </FlexBox>
       ),
     });
   }

src/components/Members/Members.module.css

@@ -1,5 +1,6 @@
 .addButton {
   margin-bottom: 3px;
+  width: 100%;
 }
 
 .wrapper {
@@ -25,3 +26,7 @@
   max-width: 100%;
   text-wrap: wrap;
 }
+
+.narrowButton {
+  min-width: fit-content;
+}