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 } from "react-router-dom";
 import { Home, BookOpen, Award, User, Video } from "lucide-react";
-import { SidebarProvider, SidebarTrigger } from "../../components/ui/sidebar";
+import { SidebarProvider } from "../../components/ui/sidebar";
 import { AppSidebar } from "../../components/AppSidebar";
 
 const NAV_ITEMS = [
@@ -124,6 +124,11 @@ const STYLES = `
     max-width: 80px;
     opacity: 1;
   }
+
+  /* Ensure the dock is hidden on desktop (md and up) */
+  @media (min-width: 768px) {
+    .sl-dock-wrap { display: none !important; }
+  }
 `;
 
 export function StudentLayout() {
@@ -132,12 +137,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" />
           {/* Extra bottom padding so content clears the floating dock */}
-          <main className="flex-1 md:pb-0">
+          <main className="flex-1 pb-24 md:pb-0">
             <Outlet />
           </main>
         </div>