mobile updates

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

@@ -23,7 +23,7 @@ export function CalendarWeek({
   const weekNumber = getWeekNumber(startDate, firstDateString);
   return (
     <div className="flex flex-row">
-      <div className="my-auto text-gray-400 w-6">
+      <div className="my-auto text-gray-400 w-6 sm:block hidden">
         {weekNumber.toString().padStart(2, "0")}
       </div>
       <div className="grid grid-cols-7 grow">

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

@@ -31,10 +31,10 @@ export default function CourseCalendar() {
         border-gray-900
         rounded-lg
         bg-slate-950
-        p-1
+        sm:p-1
       "
     >
-      <div className="h-full overflow-y-scroll pe-1">
+      <div className="h-full overflow-y-scroll sm:pe-1">
         <CalendarItemsContextProvider>
           {months.map((month) => (
             <CalendarMonth key={month.month + "" + month.year} month={month} />

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

@@ -13,12 +13,12 @@ export default async function CoursePage({}: {}) {
       <div className="h-full flex flex-col">
         <DragStyleContextProvider>
           <DraggingContextProvider>
-            <div className="flex flex-row h-full">
+            <div className="flex sm:flex-row h-full flex-col">
               <div className="flex-1 h-full flex flex-col">
                 <CourseNavigation />
                 <CourseCalendar />
               </div>
-              <div className="w-96 p-3 h-full overflow-y-auto">
+              <div className="w-96 sm:p-3 h-full overflow-y-auto">
                 <CourseSettingsLink />
                 <ModuleList />
               </div>