Mini changes fixed

Author: RajinCoder

src/frontend/src/components/NERAutocomplete.tsx

@@ -43,7 +43,6 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   const theme = useTheme();
 
   const autocompleteStyle = {
-    height: '50%',
     backgroundColor: theme.palette.background.default,
     width: '100%',
     border: 0,

src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageEditContainer.tsx

@@ -14,7 +14,7 @@ import { useQuery } from '../../../hooks/utils.hooks';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
-import { TextField, Autocomplete, FormControl } from '@mui/material';
+import { TextField, Autocomplete, FormControl, Typography } from '@mui/material';
 import ReactHookEditableList from '../../../components/ReactHookEditableList';
 import { useEditWorkPackage } from '../../../hooks/work-packages.hooks';
 import WorkPackageFormDetails from './WorkPackageFormDetails';
@@ -171,7 +171,6 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
         { name: 'Projects', route: routes.PROJECTS },
         { name: `${projectWbsString} - ${workPackage.projectName}`, route: `${routes.PROJECTS}/${projectWbsString}` }
       ]}
-      headerRight={<></>}
     >
       <form
         id="work-package-edit-form"
@@ -216,24 +215,24 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
             />
           </FormControl>
         </PageBlock>
-        <PageBlock title="Expected Activities">
-          <ReactHookEditableList
-            name="expectedActivities"
-            register={register}
-            ls={expectedActivities}
-            append={appendExpectedActivity}
-            remove={removeExpectedActivity}
-          />
-        </PageBlock>
-        <PageBlock title="Deliverables">
-          <ReactHookEditableList
-            name="deliverables"
-            register={register}
-            ls={deliverables}
-            append={appendDeliverable}
-            remove={removeDeliverable}
-          />
-        </PageBlock>
+        <Typography variant="h5">Expected Activities</Typography>
+        <ReactHookEditableList
+          name="expectedActivities"
+          register={register}
+          ls={expectedActivities}
+          append={appendExpectedActivity}
+          remove={removeExpectedActivity}
+          bulletName="Expected Activity"
+        />
+        <Typography variant="h5">Deliverables</Typography>
+        <ReactHookEditableList
+          name="deliverables"
+          register={register}
+          ls={deliverables}
+          append={appendDeliverable}
+          remove={removeDeliverable}
+          bulletName="Deliverable"
+        />
         <Box textAlign="right" sx={{ my: 2 }}>
           <NERFailButton variant="contained" onClick={exitEditMode} sx={{ mx: 1 }}>
             Cancel

src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageFormDetails.tsx

@@ -69,8 +69,8 @@ const WorkPackageFormDetails: React.FC<Props> = ({
       <Typography variant="h5" sx={{ marginBottom: '10px', color: 'white' }}>
         Project Details
       </Typography>
-      <Grid container xs={12}>
-        <Grid item xs={12} md={4} sx={{ mt: 2, mr: 2 }}>
+      <Grid container spacing={1} xs={12}>
+        <Grid item xs={12} md={4}>
           <FormControl fullWidth>
             <FormLabel>Work Package Name</FormLabel>
             <ReactHookTextField
@@ -81,13 +81,13 @@ const WorkPackageFormDetails: React.FC<Props> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={2} lg={2} sx={{ mt: 2, mr: 2 }}>
+        <Grid item xs={12} md={3}>
           <ChangeRequestDropdown control={control} name="crId" errors={errors} changeHeight={56} />
         </Grid>
-        <Grid item xs={12} md={2} sx={{ mt: 2, mr: 2 }}>
+        <Grid item xs={12} md={3}>
           <StageSelect />
         </Grid>
-        <Grid item xs={12} md={2} sx={{ mt: 2, mr: 2 }}>
+        <Grid item xs={12} md={2}>
           <FormControl fullWidth sx={{ overflow: 'hidden' }}>
             <FormLabel sx={{ whiteSpace: 'noWrap' }}>Start Date (YYYY-MM-DD)</FormLabel>
             <Controller
@@ -109,7 +109,7 @@ const WorkPackageFormDetails: React.FC<Props> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={2} sx={{ mt: 2, mr: 2 }}>
+        <Grid item xs={12} md={2}>
           <FormControl fullWidth>
             <FormLabel>Duration</FormLabel>
             <ReactHookTextField
@@ -121,10 +121,10 @@ const WorkPackageFormDetails: React.FC<Props> = ({
             />
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={4} sx={{ mt: 1 }}>
+        <Grid item xs={12} md={5}>
           <FormLabel> Project Lead</FormLabel>
           <NERAutocomplete
-            sx={{ mt: 1, width: '90%' }}
+            sx={{ width: '100%' }}
             id="project-lead-autocomplete"
             onChange={(_event, value) => setLead(value?.id)}
             options={usersForProjectLead.map(userToOption)}
@@ -133,12 +133,10 @@ const WorkPackageFormDetails: React.FC<Props> = ({
             value={userToOption(usersForProjectLead.find((user) => user.userId.toString() === lead))}
           />
         </Grid>
-
-        <Grid item xs={12} md={4} sx={{ mt: 1 }}>
+        <Grid item xs={12} md={5}>
           <FormLabel>Project Manager</FormLabel>
-
           <NERAutocomplete
-            sx={{ mt: 1, width: '90%' }}
+            sx={{ width: '100%' }}
             id="project-manager-autocomplete"
             onChange={(_event, value) => setManager(value?.id)}
             options={usersForProjectManager.map(userToOption)}