better alignment for numbers

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

@@ -1,14 +1,12 @@
 "use client";
-import { CalendarMonthModel, getWeekNumber } from "./calendarMonthUtils";
+import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek } from "@/models/local/localCourse";
-import Day from "./day/Day";
 import { Expandable } from "@/components/Expandable";
-import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { CalendarWeek } from "./CalendarWeek";
 
 export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   const weekInMilliseconds = 604_800_000;
-  const four_days_in_milliseconds  = 345_600_000
+  const four_days_in_milliseconds = 345_600_000;
   const isInPast =
     new Date(month.year, month.month, 1) <
     new Date(Date.now() - four_days_in_milliseconds);
@@ -53,34 +51,3 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
     </>
   );
 };
-
-function CalendarWeek({
-  week,
-  monthNumber,
-}: {
-  week: string[]; //date strings
-  monthNumber: number;
-}) {
-  const { data: settings } = useLocalCourseSettingsQuery();
-  const startDate = getDateFromStringOrThrow(
-    settings.startDate,
-    "week calculation start date"
-  );
-  const firstDateString = getDateFromStringOrThrow(
-    week[0],
-    "week calculation first day of week"
-  );
-  const weekNumber = getWeekNumber(startDate, firstDateString);
-  return (
-    <div className="flex flex-row">
-      <div className="my-auto text-gray-400">
-        {weekNumber.toString().padStart(2, "0")}
-      </div>
-      <div className="grid grid-cols-7 grow">
-        {week.map((day, dayIndex) => (
-          <Day key={dayIndex} day={day} month={monthNumber} />
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -0,0 +1,36 @@
+"use client";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { getWeekNumber } from "./calendarMonthUtils";
+import Day from "./day/Day";
+
+export function CalendarWeek({
+  week,
+  monthNumber,
+}: {
+  week: string[]; //date strings
+  monthNumber: number;
+}) {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const startDate = getDateFromStringOrThrow(
+    settings.startDate,
+    "week calculation start date"
+  );
+  const firstDateString = getDateFromStringOrThrow(
+    week[0],
+    "week calculation first day of week"
+  );
+  const weekNumber = getWeekNumber(startDate, firstDateString);
+  return (
+    <div className="flex flex-row">
+      <div className="my-auto text-gray-400 w-5">
+        {weekNumber.toString().padStart(2, "0")}
+      </div>
+      <div className="grid grid-cols-7 grow">
+        {week.map((day, dayIndex) => (
+          <Day key={dayIndex} day={day} month={monthNumber} />
+        ))}
+      </div>
+    </div>
+  );
+}

nextjs/src/app/course/[courseName]/calendar/day/Day.tsx

@@ -43,15 +43,17 @@ export default function Day({ day, month }: { day: string; month: number }) {
 
   const meetingClasses =
     classOnThisDay && isInSemester ? " bg-slate-900 " : " ";
-  const monthClass = isInSameMonth
-    ? isToday
-      ? " border border-blue-700 shadow-[0_0px_10px_0px] shadow-blue-500/50 "
-      : " border border-slate-700 "
+
+  const todayClasses = isToday
+    ? " border  border-blue-700 shadow-[0_0px_10px_0px] shadow-blue-500/50 "
     : " ";
 
+  const monthClass =
+    isInSameMonth && !isToday ? " border border-slate-700 " : " ";
+
   return (
     <div
-      className={" rounded-lg m-1 min-h-10 " + meetingClasses + monthClass}
+      className={" rounded-lg m-1 min-h-10 " + meetingClasses + monthClass + todayClasses}
       onDrop={(e) => itemDropOnDay(e, day)}
       onDragOver={(e) => e.preventDefault()}
     >