feat: redesign course picker in Add Class modal for large course lists

- Replace full list of radio rows with a compact selected course preview card.
- Add an expandable course selection drawer with search and course-type filter chips (All, Lecture, Lab).
- Add fast duration presets (45m, 50m, 60m, 90m, 120m) for rapid scheduling.
- Prevent scroll overflow and layout breakage when a student has 10+ enrolled courses.

scripts/test-add-class-modal.mjs

@@ -0,0 +1,40 @@
+import { chromium } from 'playwright';
+
+async function testModal() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 390, height: 844 },
+    deviceScaleFactor: 2,
+    isMobile: true,
+  });
+  const page = await context.newPage();
+
+  await page.goto('http://127.0.0.1:3000/');
+  await page.waitForTimeout(2000);
+
+  // Click Add a class button
+  const addBtn = page.getByRole('button', { name: 'Add a class' });
+  await addBtn.click();
+  await page.waitForTimeout(1000);
+  await page.screenshot({ path: './screenshots/13-add-class-modal-default.png' });
+
+  // Click Change subject button
+  const changeBtn = page.getByText('Change');
+  if (await changeBtn.isVisible()) {
+    await changeBtn.click();
+    await page.waitForTimeout(600);
+    await page.screenshot({ path: './screenshots/14-add-class-modal-picker-open.png' });
+
+    // Type into search
+    const searchInput = page.getByPlaceholder('Search courses by name or code...');
+    if (await searchInput.isVisible()) {
+      await searchInput.fill('Data');
+      await page.waitForTimeout(500);
+      await page.screenshot({ path: './screenshots/15-add-class-modal-search.png' });
+    }
+  }
+
+  await browser.close();
+}
+
+testModal().catch(console.error);