Fix save button in Edit view - add id to form and form attribute to button. Edit view form now completed refactored away from table.

Author: BrettEastman

src/components/iep/Iep.tsx

@@ -43,7 +43,7 @@ const Iep = ({ iep_id }: IepProps) => {
   }
 
   return (
-    <Stack>
+    <Stack sx={{ width: 1 }}>
       <Container>
         <Box className={$Iep.goalBox}>
           <p className={$Iep.goalTab}>Goals &#40;{goals?.length ?? 0}&#41;</p>

src/pages/students/[student_id].tsx

@@ -123,12 +123,12 @@ const ViewStudentPage = () => {
   return (
     <Stack
       spacing={2}
-      // sx={{
-      //   display: "flex",
-      //   flexDirection: "column",
-      //   alignItems: "center",
-      //   width: "100vu",
-      // }}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "100%",
+      }}
     >
       <Container
         className={$StudentPage.studentInfoContainer}
@@ -176,7 +176,7 @@ const ViewStudentPage = () => {
               >
                 Cancel
               </Button>
-              {/* <Button
+              <Button
                 className={`${$button.default} ${$home.bold}`}
                 sx={[
                   {
@@ -191,11 +191,11 @@ const ViewStudentPage = () => {
                   buttonSX,
                 ]}
                 type="submit"
-                onClick={handleEditStudent}
+                form="edit"
                 variant="contained"
               >
                 Save
-              </Button> */}
+              </Button>
             </Box>
           )}
         </Box>
@@ -223,7 +223,7 @@ const ViewStudentPage = () => {
 
       {viewState === VIEW_STATES.EDIT ? (
         <Stack gap={0.5} sx={{ justifyContent: "center" }}>
-          <form onSubmit={handleEditStudent}>
+          <form id="edit" onSubmit={handleEditStudent}>
             <Stack gap={0.5}>
               <Container
                 className={$StudentPage.studentEditContainer}
@@ -294,7 +294,7 @@ const ViewStudentPage = () => {
                 />
               </Container>
             </Stack>
-            <button type="submit">Submit</button>
+            {/* <button type="submit">Submit</button> */}
           </form>
 
           <Container sx={{ marginTop: "2rem" }}>