fix: improve classroom navigation and mobile responsiveness

src/app/rooms/[id]/members/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { Loader2, ChevronLeft, ChevronRight } from 'lucide-react';
 import { useParams } from 'next/navigation';
+import Link from 'next/link';
 
 type Member = {
     userEmail: string;
@@ -41,6 +42,11 @@ export default function MembersListView() {
 
     return (
         <div className="space-y-3 min-h-[400px] flex flex-col justify-between">
+            <div className="flex items-center gap-2 mb-2">
+                <Link href={`/rooms/${id}`} className="flex items-center gap-1.5 text-slate-500 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white transition-colors text-xs font-bold uppercase tracking-wider">
+                    <ChevronLeft className="w-4 h-4" /> Back to Classroom
+                </Link>
+            </div>
             {/* Main Content Area */}
             <div className="flex-1 space-y-3">
                 {loading ? (

src/app/rooms/[id]/page.tsx

@@ -378,7 +378,7 @@ export default function ClassroomPage() {
               </div>
             </div>
 
-            <div className="flex items-center gap-2 overflow-x-auto whitespace-nowrap pb-1 scrollbar-hide w-full xl:w-auto max-w-full">
+            <div className="flex items-center gap-2 overflow-x-auto whitespace-nowrap flex-nowrap pb-1 scrollbar-hide w-full xl:w-auto max-w-full">
               {[
                 { id: "ask-ai", label: "Ask AI", icon: Brain },
                 { id: "community", label: "Community", icon: MessageSquare },
@@ -479,7 +479,7 @@ export default function ClassroomPage() {
                 Classroom Board
               </h2>
 
-              <div className="flex items-center gap-1.5 bg-white dark:bg-zinc-900 p-1.5 rounded-xl border border-slate-200 dark:border-zinc-800">
+              <div className="flex items-center gap-1.5 bg-white dark:bg-zinc-900 p-1.5 rounded-xl border border-slate-200 dark:border-zinc-800 w-full sm:w-auto overflow-x-auto flex-nowrap scrollbar-hide whitespace-nowrap">
                 <button
                   onClick={() => setDoubtFilter("unsolved")}
                   className={`px-4 py-2 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all duration-300 ${doubtFilter === "unsolved" ? "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20" : "text-slate-400 dark:text-zinc-500 hover:text-slate-900 dark:hover:text-zinc-200"}`}
@@ -711,7 +711,7 @@ export default function ClassroomPage() {
                 )}
               </h2>
 
-              <div className="flex items-center gap-1.5 bg-white dark:bg-zinc-900 p-1.5 rounded-xl border border-slate-200 dark:border-zinc-800">
+              <div className="flex items-center gap-1.5 bg-white dark:bg-zinc-900 p-1.5 rounded-xl border border-slate-200 dark:border-zinc-800 w-full sm:w-auto overflow-x-auto flex-nowrap scrollbar-hide whitespace-nowrap">
                 <button
                   onClick={() => setDoubtFilter("unsolved")}
                   className={`px-4 py-2 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all duration-300 ${doubtFilter === "unsolved" ? "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20" : "text-slate-400 dark:text-zinc-500 hover:text-slate-900 dark:hover:text-zinc-200"}`}

src/app/rooms/page.tsx

@@ -146,18 +146,18 @@ export default function RoomsPage() {
                         </h1>
                     </div>
 
-                    <div className="flex items-center gap-4 shrink-0">
+                    <div className="flex items-center gap-4 shrink-0 w-full sm:w-auto">
                         {appUser?.role === 'teacher' || appUser?.role === 'admin' ? (
                             <button 
                                 onClick={() => setIsCreateModalOpen(true)}
-                                className="group flex items-center gap-3 px-6 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold uppercase tracking-wider text-xs transition-all duration-300 shadow-lg shadow-blue-600/10 active:scale-[0.98]"
+                                className="w-full sm:w-auto group flex items-center justify-center gap-3 px-6 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold uppercase tracking-wider text-xs transition-all duration-300 shadow-lg shadow-blue-600/10 active:scale-[0.98]"
                             >
                                 <Plus className="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" /> New Class
                             </button>
                         ) : (
                             <button 
                                 onClick={() => setIsJoinModalOpen(true)}
-                                className="group flex items-center gap-3 px-6 py-4 bg-slate-50 dark:bg-zinc-900 border border-slate-200 dark:border-zinc-800 text-slate-700 dark:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-800/60 rounded-xl font-bold uppercase tracking-wider text-xs transition-all duration-300"
+                                className="w-full sm:w-auto group flex items-center justify-center gap-3 px-6 py-4 bg-slate-50 dark:bg-zinc-900 border border-slate-200 dark:border-zinc-800 text-slate-700 dark:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-800/60 rounded-xl font-bold uppercase tracking-wider text-xs transition-all duration-300"
                             >
                                 <LinkIcon className="w-4 h-4" /> Join Code
                             </button>

src/components/Header.tsx

@@ -159,7 +159,7 @@ export default function Header() {
         </div>
 
         {/* Mobile Menu Toggle and Theme */}
-        <div className="flex lg:hidden items-center gap-3 relative z-50 ml-auto">
+        <div className="flex md:hidden items-center gap-3 relative z-50 ml-auto">
           <ThemeToggle />
           <button
             onClick={() => setIsOpen(!isOpen)}
@@ -172,9 +172,8 @@ export default function Header() {
 
       </div>
 
-      {/* Mobile Menu */}
       <div
-        className={`fixed inset-0 h-screen w-screen z-40 bg-white dark:bg-black transform transition-transform duration-300 ease-in-out lg:hidden flex flex-col pt-24 px-6 pb-8 gap-8 ${
+        className={`fixed inset-0 h-screen w-screen z-40 bg-white dark:bg-black transform transition-transform duration-300 ease-in-out md:hidden flex flex-col pt-24 px-6 pb-8 gap-8 overflow-y-auto ${
           isOpen ? "translate-y-0" : "-translate-y-full"
         }`}
       >

src/configs/database-url.ts

@@ -2,6 +2,9 @@ export function getDatabaseUrl() {
     const databaseUrl = process.env.DATABASE_URL?.trim();
 
     if (!databaseUrl) {
+        if (process.env.NODE_ENV === 'test') {
+            throw new Error('DATABASE_URL is required. Please check your .env file.');
+        }
         // Return a dummy URL during build steps so Next.js static evaluation doesn't crash.
         // At runtime, if this is truly missing, actual DB queries will fail.
         console.warn('⚠️ DATABASE_URL is not set. Using dummy URL. If this is a build step, it is safe to ignore.');