feat(web): implement aligned course codes with jetbrains mono

web/src/lib/components/CourseTable.svelte

@@ -147,6 +147,11 @@ function timeIsTBA(course: CourseResponse): boolean {
   return isMeetingTimeTBA(mt) && isTimeTBA(mt);
 }
 
+// Calculate max subject code length for alignment
+let maxSubjectLength = $derived(
+  courses.length > 0 ? Math.max(...courses.map((c) => c.subject.length)) : 3
+);
+
 // Column definitions
 const columns: ColumnDef<CourseResponse, unknown>[] = [
   {
@@ -453,6 +458,11 @@ const table = createSvelteTable({
                                     {:else if colId === "course_code"}
                                         {@const subjectDesc =
                                             subjectMap[course.subject]}
+                                        {@const paddedSubject =
+                                            course.subject.padStart(
+                                                maxSubjectLength,
+                                                " ",
+                                            )}
                                         <td class="py-2 px-2 whitespace-nowrap">
                                             <SimpleTooltip
                                                 text={subjectDesc
@@ -462,13 +472,7 @@ const table = createSvelteTable({
                                                 side="bottom"
                                                 passthrough
                                             >
-                                                <span class="font-semibold"
-                                                    >{course.subject}
-                                                    {course.courseNumber}</span
-                                                >{#if course.sequenceNumber}<span
-                                                        class="text-muted-foreground"
-                                                        >-{course.sequenceNumber}</span
-                                                    >{/if}
+                                                <span class="font-semibold font-mono tracking-tight whitespace-pre">{paddedSubject} {course.courseNumber}</span>{#if course.sequenceNumber}<span class="text-muted-foreground font-mono tracking-tight">-{course.sequenceNumber}</span>{/if}
                                             </SimpleTooltip>
                                         </td>
                                     {:else if colId === "title"}

web/src/routes/layout.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -60,6 +61,7 @@
   --color-surface-100: var(--card);
   --color-surface-content: var(--foreground);
   --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
   --animate-accordion-down: accordion-down 200ms ease-out;
   --animate-accordion-up: accordion-up 200ms ease-out;
 }