Fix-task-responsiveness (#174)

* update jon snow (#171)

* fix task responsiveness

Author: smalho01

How-To-Launch-SMART-on-FHIR-Apps.md

@@ -33,7 +33,7 @@ VITE_SMART_LAUNCH_URL = https://smartlauncher.interop.community/sample-app/launc
 1. Start request-generator normally and go to `http://localhost:3000/`. Click the "Authorize" button.
 2. Start rems-admin normally.
 3. In request-generator, click the "Select a Patient" button.
-4. Select Jon Snow (id: 130803).
+4. Select John Snow (id: 130803).
 5. Click the "Launch SMART on FHIR app" button. This opens the SMART on FHIR app launch page provided as values to the `VITE_SMART_LAUNCH_URL` and `SMART_ENDPOINT` environment variables.
 6. Click the "Authorize" button.
 7. You should see the expected SMART on FHIR app launch properly.

src/components/RequestDashboard/TasksSection.jsx

@@ -377,7 +377,7 @@ const TasksSection = props => {
     return (
       <Fragment key={task.id}>
         <Grid item xs={12} lg={6}>
-          <Grid className={classes.taskTabMain} item container xs={12}>
+          <Grid className={classes.taskTabMain} item container xs={12} spacing={2}>
             <Grid className={classes.taskTabHeader} item xs={2}>
               {`Task ID: ${task.id}`}
             </Grid>
@@ -401,8 +401,9 @@ const TasksSection = props => {
             <Grid className={classes.taskTabOwner} item xs={6}>
               {ownerText}
             </Grid>
-            <Grid className={classes.taskTabButton} item xs={3}>
+            <Grid className={classes.taskTabButton} item xs={12} sm={6} md={3}>
               <Button
+                fullWidth
                 variant="outlined"
                 onClick={event => {
                   handleMenuClick(event, task);
@@ -412,8 +413,9 @@ const TasksSection = props => {
                 Status
               </Button>
             </Grid>
-            <Grid className={classes.taskTabButton} item xs={2}>
+            <Grid className={classes.taskTabButton} item xs={12} sm={6} md={2}>
               <Button
+                fullWidth
                 variant="outlined"
                 onClick={event => {
                   handleAssignMenuClick(event, task);
@@ -423,11 +425,9 @@ const TasksSection = props => {
                 Assign
               </Button>
             </Grid>
-            <Grid item xs={1}>
-              {/*spacer*/}
-            </Grid>
-            <Grid className={classes.taskTabButton} item xs={3}>
+            <Grid className={classes.taskTabButton} item xs={12} sm={6} md={3}>
               <Button
+                fullWidth
                 variant="contained"
                 color="error"
                 startIcon={<DeleteIcon />}
@@ -438,8 +438,9 @@ const TasksSection = props => {
                 Delete
               </Button>
             </Grid>
-            <Grid className={classes.taskTabButton} item xs={3}>
+            <Grid className={classes.taskTabButton} item xs={12} sm={6} md={4}>
               <Button
+                fullWidth
                 variant="contained"
                 onClick={() => {
                   launchTask(task);