feat: responsive for web with sidebar and different styling for test ui on web

src/pages/student/StudentLayout.tsx

@@ -1,6 +1,6 @@
 import { Outlet, NavLink, useLocation } from "react-router-dom";
 import { Home, BookOpen, Award, User, Video, Map } from "lucide-react";
-import { SidebarProvider, SidebarTrigger } from "../../components/ui/sidebar";
+import { SidebarProvider } from "../../components/ui/sidebar";
 import { AppSidebar } from "../../components/AppSidebar";
 
 const NAV_ITEMS = [
@@ -190,6 +190,11 @@ const STYLES = `
   .quest-mode .sl-dock-item:not(.active):hover .sl-dock-icon {
     opacity: 0.85;
   }
+
+  /* Ensure the dock is hidden on desktop (md and up) */
+  @media (min-width: 768px) {
+    .sl-dock-wrap { display: none !important; }
+  }
 `;
 
 export function StudentLayout() {
@@ -204,11 +209,13 @@ export function StudentLayout() {
       <style>{STYLES}</style>
       <div className="flex min-h-screen w-full overflow-x-hidden">
         {/* Desktop Sidebar */}
-        <AppSidebar />
+        <div className="hidden md:block">
+          <AppSidebar />
+        </div>
 
         <div className="flex flex-col flex-1 min-w-0">
-          <SidebarTrigger className="hidden md:block" />
-          <main className="flex-1 md:pb-0">
+          {/* Extra bottom padding so content clears the floating dock */}
+          <main className="flex-1 pb-24 md:pb-0">
             <Outlet />
           </main>
         </div>