diff --git a/README.md b/README.md
index ee05f0d..515e20d 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,8 @@ mermaid charts:
     - <https://github.com/mermaidjs/mermaid-live-editor/issues/41>
     - aparently not just any base64 encoding works, use their function
 - if the chart gets auto-converted to a png to be displayed, it should work properly on canvas as well
+- could lead to a lot of tmp png's being added while the chart is being changed (each change will trigger an upload to canvas)
+- maybe track a list of unreferenced files and delete them?
 
 remember expanded modules as well as scorll position
 
diff --git a/src/app/course/[courseName]/CollapsableSidebar.tsx b/src/app/course/[courseName]/CollapsableSidebar.tsx
index 33f099b..0d2bfbd 100644
--- a/src/app/course/[courseName]/CollapsableSidebar.tsx
+++ b/src/app/course/[courseName]/CollapsableSidebar.tsx
@@ -12,19 +12,19 @@ export default function CollapsableSidebar() {
   const widthClass = isCollapsed ? "w-0" : "w-96";
   const visibilityClass = isCollapsed ? "invisible " : "visible";
   return (
-    <div>
+    <div className="h-full flex flex-col">
       <div className="flex flex-row justify-between mb-2">
         <div className="visible mx-3 mt-2">
           <button onClick={() => setIsCollapsed((i) => !i)}>
             {isCollapsed ? <LeftChevron /> : <RightChevron />}
           </button>
         </div>
-        <div className={isCollapsed ? "w-0 invisible hidden" : ""}>
+        <div className={" " + (isCollapsed ? "w-0 invisible hidden" : "")}>
           <CourseSettingsLink />
         </div>
       </div>
       <div
-        className={`${widthClass} sm:p-3 overflow-y-auto transition-all ${visibilityClass}`}
+        className={`${widthClass} flex-1 sm:p-3 overflow-y-auto transition-all ${visibilityClass}`}
       >
         <ModuleList />
       </div>
diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
index fe482f0..ee7a8b1 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
@@ -15,13 +15,12 @@ import { useCourseContext } from "@/app/course/[courseName]/context/courseContex
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import ClientOnly from "@/components/ClientOnly";
 import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
-import { AssignmentSubmissionType } from "@/models/local/assignment/assignmentSubmissionType";
-import { LocalCourseSettings } from "@/models/local/localCourseSettings";
 import { useRouter } from "next/navigation";
 import { AssignmentFooterButtons } from "./AssignmentFooterButtons";
 import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
 import EditAssignmentHeader from "./EditAssignmentHeader";
 import { Spinner } from "@/components/Spinner";
+import { getAssignmentHelpString } from "./getAssignmentHelpString";
 
 export default function EditAssignment({
   moduleName,
@@ -127,7 +126,7 @@ export default function EditAssignment({
       <div className={"min-h-0 flex flex-row w-full flex-grow"}>
         {showHelp && (
           <pre className=" max-w-96">
-            <code>{getHelpString(settings)}</code>
+            <code>{getAssignmentHelpString(settings)}</code>
           </pre>
         )}
         <div className="flex-1 h-full">
@@ -163,19 +162,3 @@ export default function EditAssignment({
     </div>
   );
 }
-
-function getHelpString(settings: LocalCourseSettings) {
-  const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- ");
-  const helpString = `SubmissionTypes:
-- ${AssignmentSubmissionType.ONLINE_TEXT_ENTRY}
-- ${AssignmentSubmissionType.ONLINE_UPLOAD}
-- ${AssignmentSubmissionType.DISCUSSION_TOPIC}
-AllowedFileUploadExtensions:
-- pdf
-- jpg
-- jpeg
-- png
-Assignment Group Names:
-- ${groupNames}`;
-  return helpString;
-}
diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx
new file mode 100644
index 0000000..080508c
--- /dev/null
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { AssignmentSubmissionType } from "@/models/local/assignment/assignmentSubmissionType";
+import { LocalCourseSettings } from "@/models/local/localCourseSettings";
+
+export function getAssignmentHelpString(settings: LocalCourseSettings) {
+  const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- ");
+  const helpString = `
+Assignment Group Names:
+- ${groupNames}
+SubmissionTypes:
+- ${AssignmentSubmissionType.ONLINE_TEXT_ENTRY}
+- ${AssignmentSubmissionType.ONLINE_UPLOAD}
+- ${AssignmentSubmissionType.DISCUSSION_TOPIC}
+AllowedFileUploadExtensions:
+- pdf
+- jpg
+- jpeg
+- png
+---
+
+description goes here
+
+## Rubric
+- 1pt: singular point
+- 1pts: plural points
+- 10pts: (extra credit) extra credit points
+- 10pts: (Extra Credit) Caps also works`;
+  return helpString;
+}