#1597 right aligned the pencil icon by adding flex-end to the grid items

Author: qihongw08

src/frontend/src/pages/TeamsPage/TeamMembersPageBlock.tsx

@@ -179,10 +179,10 @@ const TeamMembersPageBlock: React.FC<TeamMembersPageBlockProps> = ({ team }) =>
 
   const NonEditingHeadView = () => (
     <Grid container>
-      <Grid item xs={11} lg="auto">
+      <Grid item xs={11}>
         <DetailDisplay label="Head" content={fullNamePipe(team.head)} />
       </Grid>
-      <Grid item xs={1} mt={-1}>
+      <Grid item xs={1} mt={-1} display={'flex'} justifyContent={'flex-end'}>
         {hasPerms && <IconButton children={<Edit />} onClick={() => setIsEditingLeads(true)} />}
       </Grid>
     </Grid>
@@ -193,18 +193,18 @@ const TeamMembersPageBlock: React.FC<TeamMembersPageBlockProps> = ({ team }) =>
       <Grid item xs={11}>
         <DetailDisplay label="Leads" content={team.leads.map((lead) => fullNamePipe(lead)).join(', ')} />
       </Grid>
-      <Grid item xs={1} mt={-1}>
+      <Grid item xs={1} mt={-1} display={'flex'} justifyContent={'flex-end'}>
         {hasPerms && <IconButton children={<Edit />} onClick={() => setIsEditingLeads(true)} />}
       </Grid>
     </Grid>
   );
 
   const NonEditingMembersView = () => (
     <Grid container>
-      <Grid item xs={11} lg="auto">
+      <Grid item xs={11}>
         <DetailDisplay label="Members" content={team.members.map((member) => fullNamePipe(member)).join(', ')} />
       </Grid>
-      <Grid item xs={1} mt={-1}>
+      <Grid item xs={1} mt={-1} display={'flex'} justifyContent={'flex-end'}>
         {hasPerms && <IconButton children={<Edit />} onClick={() => setIsEditingMembers(true)} />}
       </Grid>
     </Grid>