fix: improve classroom navigation and mobile responsiveness

[seffhunnn]

User description

Description

Improved classroom navigation and tab usability on mobile screens by making tab filters horizontally scrollable, fixing overlapping action buttons, refining responsive layouts for classroom pages, and improving mobile header/sidebar behavior while preserving the existing desktop experience. Also included a small test-environment compatibility fix for DATABASE_URL handling to keep the existing test suite stable.

Related Issue

Closes #526

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• Style / UI change (no logic change)
• Test addition or update

Screenshots (if UI change)

NA

How Has This Been Tested?

• Tested locally with npm run dev
• Verified on mobile viewport (375px)
• Verified on desktop viewport (1440px)

Checklist

• I have tested my changes locally (npm run dev)
• My code follows the existing code style (TypeScript, Tailwind, no any types)
• I have not introduced unrelated changes (each PR should address one issue)
• I have added comments where necessary
• My branch is up to date with main
• I have linked the related issue above
• Screenshots are included (if this is a UI change)

---

CodeAnt-AI Description

Improve classroom navigation on mobile and enforce test database setup

What Changed

• Classroom action buttons, tab filters, and header controls now stay usable on smaller screens without wrapping or getting cut off
• The mobile menu now opens only on smaller viewports and can scroll when its content is taller than the screen
• The members page now includes a clear “Back to Classroom” link for easier navigation
• Test runs now stop with a clear error when DATABASE_URL is missing instead of falling back to a dummy value

Impact

✅ Easier classroom navigation on phones
✅ Fewer broken mobile layouts
✅ Clearer test setup failures

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[codeant-ai]

CodeAnt AI is reviewing your PR.

[coderabbitai]

Warning

Review limit reached

@seffhunnn, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 14 minutes and 30 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5fefc2be-1107-4ec4-97f9-82d395a67839

📥 Commits

Reviewing files that changed from the base of the PR and between 5760c05 and f06b089.

📒 Files selected for processing (5)

• src/app/rooms/[id]/members/page.tsx
• src/app/rooms/[id]/page.tsx
• src/app/rooms/page.tsx
• src/components/Header.tsx
• src/configs/database-url.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

@coderabbitai review

[codeant-ai]

CodeAnt AI finished reviewing your PR.

[seffhunnn]

Hi @knoxiboy, I’m currently assigned to #526, but the automation bot appears to be incorrectly rejecting my PR due to an issue-assignment check. I’ve already recreated the PR using a clean branch with only the intended mobile responsiveness changes and ensured the PR only references Closes #526. Could you please take a quick look? Thanks!

[knoxiboy]

Automated Detailed Review

• Failing CI checks:
• Build & Type Check: FAILURE
  Details: https://github.com/knoxiboy/DoubtDesk/actions/runs/27038411319/job/79808141518
• Build & Type Check: FAILURE
  Details: https://github.com/knoxiboy/DoubtDesk/actions/runs/27038648854/job/79808923970
• Build & Type Check: FAILURE
  Details: https://github.com/knoxiboy/DoubtDesk/actions/runs/27049655922/job/79842614970
• Build & Type Check: FAILURE
  Details: https://github.com/knoxiboy/DoubtDesk/actions/runs/27055304286/job/79858459747
• Duplicate / Already Implemented Check: Please verify that the changes are not already present in the codebase. If they are, consider closing this PR with duplicate or already-implemented label.

Please address the above items and request a review again.