consoladating layouts

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx

@@ -15,7 +15,7 @@ export default function AssignmentPreview({
     0
   );
   return (
-    <div className="h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto ">
       <section>
         <div className="flex">
           <div className="flex-1 text-end pe-3">Due Date</div>

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -21,6 +21,7 @@ import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuth
 import EditAssignmentHeader from "./EditAssignmentHeader";
 import { Spinner } from "@/components/Spinner";
 import { getAssignmentHelpString } from "./getAssignmentHelpString";
+import { EditLayout } from "@/components/EditLayout";
 
 export default function EditAssignment({
   moduleName,
@@ -95,7 +96,7 @@ export default function EditAssignment({
           }
         }
         setError("");
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {
         setError(e.toString());
       }
@@ -120,47 +121,53 @@ export default function EditAssignment({
   ]);
 
   return (
-    <div className="h-full flex flex-col align-middle px-1">
-      <EditAssignmentHeader
-        moduleName={moduleName}
-        assignmentName={assignmentName}
-      />
-      <div className={"min-h-0 flex flex-row w-full flex-grow"}>
-        {showHelp && (
-          <pre className=" max-w-96">
-            <code>{getAssignmentHelpString(settings)}</code>
-          </pre>
-        )}
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
-        </div>
-        <div className="flex-1 h-full">
-          <div className="text-red-300">{error && error}</div>
-
-          <div className="px-3 h-full">
-            <ClientOnly>
-              <SuspenseAndErrorHandling showToast={false}>
-                {imageUpdateIsPending && (
-                  <div className="flex justify-center">
-                    <Spinner /> images being uploaded to canvas
-                  </div>
-                )}
-
-                <AssignmentPreview assignment={assignment} />
-              </SuspenseAndErrorHandling>
-            </ClientOnly>
+    <EditLayout
+      Header={
+        <EditAssignmentHeader
+          moduleName={moduleName}
+          assignmentName={assignmentName}
+        />
+      }
+      Body={
+        <>
+          {showHelp && (
+            <pre className=" max-w-96">
+              <code>{getAssignmentHelpString(settings)}</code>
+            </pre>
+          )}
+          <div className="flex-1 h-full">
+            <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
           </div>
-        </div>
-      </div>
-      <ClientOnly>
-        <SuspenseAndErrorHandling>
-          <AssignmentFooterButtons
-            moduleName={moduleName}
-            assignmentName={assignmentName}
-            toggleHelp={() => setShowHelp((h) => !h)}
-          />
-        </SuspenseAndErrorHandling>
-      </ClientOnly>
-    </div>
+          <div className="flex-1 h-full">
+            <div className="text-red-300">{error && error}</div>
+
+            <div className="px-3 h-full ">
+              <ClientOnly>
+                <SuspenseAndErrorHandling showToast={false}>
+                  {imageUpdateIsPending && (
+                    <div className="flex justify-center">
+                      <Spinner /> images being uploaded to canvas
+                    </div>
+                  )}
+
+                  <AssignmentPreview assignment={assignment} />
+                </SuspenseAndErrorHandling>
+              </ClientOnly>
+            </div>
+          </div>
+        </>
+      }
+      Footer={
+        <ClientOnly>
+          <SuspenseAndErrorHandling>
+            <AssignmentFooterButtons
+              moduleName={moduleName}
+              assignmentName={assignmentName}
+              toggleHelp={() => setShowHelp((h) => !h)}
+            />
+          </SuspenseAndErrorHandling>
+        </ClientOnly>
+      }
+    />
   );
 }

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx

@@ -13,14 +13,14 @@ export default function EditAssignmentHeader({
   const { courseName } = useCourseContext();
   return (
     <div className="py-1 flex flex-row justify-start gap-3">
-      <Link className="btn btn-thin" href={getCourseUrl(courseName)} shallow={true}>
+      <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
         {courseName}
       </Link>
       <UpdateAssignmentName
         assignmentName={assignmentName}
         moduleName={moduleName}
       />
-      <div>{assignmentName}</div>
+      <div className="my-auto">{assignmentName}</div>
     </div>
   );
 }