got the middle scrolling correct

nextjs/src/app/course/[courseName]/ModuleList.tsx

@@ -1,3 +0,0 @@
-export default function ModuleList() {
-  return <div></div>
-}

nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx

@@ -19,10 +19,10 @@ export default function CourseCalendar() {
   const months = getMonthsBetweenDates(startDateTime, endDateTime);
 
   return (
-    <>
+    <div className="overflow-y-scroll h-full border bg-slate-950">
       {months.map((month) => (
         <CalendarMonth key={month.month + "" + month.year} month={month} />
       ))}
-    </>
+    </div>
   );
 }

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -0,0 +1,11 @@
+import { LocalModule } from "@/models/local/localModules";
+import React from "react";
+
+export default function ExpandableModule({ module }: { module: LocalModule }) {
+  return (
+    <details>
+      <summary> {module.name}</summary>
+      expanded details
+    </details>
+  );
+}

nextjs/src/app/course/[courseName]/modules/ModuleList.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { useCourseContext } from "../context/courseContext";
+import ExpandableModule from "./ExpandableModule";
+
+export default function ModuleList() {
+  const {
+    localCourse: { modules },
+  } = useCourseContext();
+  return (
+    <div>
+      {modules.map((m) => (
+        <ExpandableModule key={m.name} module={m} />
+      ))}
+    </div>
+  );
+}

nextjs/src/app/course/[courseName]/page.tsx

@@ -3,7 +3,7 @@ import CourseContextProvider from "./context/CourseContextProvider";
 import CourseCalendar from "./calendar/CourseCalendar";
 import { HydrationBoundary } from "@tanstack/react-query";
 import CourseSettings from "./CourseSettings";
-import ModuleList from "./ModuleList";
+import ModuleList from "./modules/ModuleList";
 
 export default async function CoursePage({
   params: { courseName },
@@ -14,13 +14,13 @@ export default async function CoursePage({
   return (
     <HydrationBoundary state={dehydratedState}>
       <CourseContextProvider localCourseName={courseName}>
-        <div>
+        <div className="h-full flex flex-col">
           <CourseSettings />
-          <div className="flex flex-row">
-            <div className="grow">
+          <div className="flex flex-row min-h-0">
+            <div className="flex-1 min-h-0">
               <CourseCalendar />
             </div>
-            <div className="w-96">
+            <div className="m-5">
               <ModuleList />
             </div>
           </div>