授業選択ダイアログのデザイン改善 (#663)

# PRの概要
closes #637 

## 具体的な変更内容
###before
<img width="340" alt="スクリーンショット 2025-02-20 17 55 40"
src="https://github.com/user-attachments/assets/e5237de7-f3a7-495d-aa50-ff3adcce2082"
/>
<img width="337" alt="スクリーンショット 2025-02-20 17 55 52"
src="https://github.com/user-attachments/assets/f236172a-4fc6-4bc3-afc9-d4e5cfe214ca"
/>
###after
<img width="337" alt="スクリーンショット 2025-02-20 17 56 16"
src="https://github.com/user-attachments/assets/a23352e2-081d-4379-8383-948e4c4b65f4"
/>
<img width="339" alt="スクリーンショット 2025-02-20 17 56 23"
src="https://github.com/user-attachments/assets/411efd44-2990-412b-89cc-a2167dcbe308"
/>

## 影響範囲
設定画面（授業選択）

## 動作要件
授業選択画面で曜限をクリック

## 補足

## レビューリクエストを出す前にチェック！

- [ ☑️] 改めてセルフレビューしたか
- [ ☑️] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [ ] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: RRRyoma

web/components/course/components/SelectCourseDialog.tsx

@@ -114,7 +114,7 @@ export default function SelectCourseDialog({
               条件に当てはまる授業はありません。
             </p>
           ) : (
-            <ul className="mt-4">
+            <ul className="mt-4 overflow-auto max-h-[300px]">
               {filteredAvailableCourses.map((course) => (
                 <li key={course.id}>
                   <button