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

web/bun.lock

@@ -5,6 +5,7 @@
     "": {
       "name": "banner-web",
       "dependencies": {
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@icons-pack/svelte-simple-icons": "^6.5.0",
         "d3-scale": "^4.0.2",
         "d3-shape": "^3.2.0",
@@ -16,27 +17,27 @@
       },
       "devDependencies": {
         "@biomejs/biome": "^1.9.4",
-        "@fontsource-variable/inter": "^5.2.5",
-        "@lucide/svelte": "^0.563.0",
-        "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/kit": "^2.16.0",
-        "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@tailwindcss/vite": "^4.0.0",
+        "@fontsource-variable/inter": "^5.2.8",
+        "@lucide/svelte": "^0.563.1",
+        "@sveltejs/adapter-static": "^3.0.10",
+        "@sveltejs/kit": "^2.50.1",
+        "@sveltejs/vite-plugin-svelte": "^5.1.1",
+        "@tailwindcss/vite": "^4.1.18",
         "@tanstack/table-core": "^8.21.3",
         "@types/d3-scale": "^4.0.9",
         "@types/d3-shape": "^3.1.8",
         "@types/d3-time-format": "^4.0.3",
         "@types/node": "^25.1.0",
-        "bits-ui": "^1.3.7",
+        "bits-ui": "^1.8.0",
         "clsx": "^2.1.1",
-        "jsdom": "^26.0.0",
-        "svelte": "^5.19.0",
-        "svelte-check": "^4.1.4",
-        "tailwind-merge": "^3.0.1",
-        "tailwindcss": "^4.0.0",
-        "typescript": "^5.7.2",
-        "vite": "^6.3.5",
-        "vitest": "^3.0.5",
+        "jsdom": "^26.1.0",
+        "svelte": "^5.49.1",
+        "svelte-check": "^4.3.5",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.18",
+        "typescript": "^5.9.3",
+        "vite": "^6.4.1",
+        "vitest": "^3.2.4",
       },
     },
   },
@@ -137,6 +138,8 @@
 
     "@fontsource-variable/inter": ["@fontsource-variable/inter@5.2.8", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="],
 
+    "@fontsource-variable/jetbrains-mono": ["@fontsource-variable/jetbrains-mono@5.2.8", "", {}, "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q=="],
+
     "@icons-pack/svelte-simple-icons": ["@icons-pack/svelte-simple-icons@6.5.0", "", { "peerDependencies": { "@sveltejs/kit": "^2.5.0", "svelte": "^4.2.0 || ^5.0.0" } }, "sha512-Xj3PTioiV3TJ1NTKsXY95NFG8FUqw90oeyDZIlslWHs1KkuCheu1HOPrlHb0/IM0b4cldPgx/0TldzxzBlM8Cw=="],
 
     "@internationalized/date": ["@internationalized/date@3.10.1", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA=="],

web/package.json

@@ -38,6 +38,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@icons-pack/svelte-simple-icons": "^6.5.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",

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;
 }