feat: implement mobile responsiveness audit, tables-to-cards, and 3D screen WebXR simulator fallback

[Agbasimere]

Description

This pull request audits and implements mobile responsive layouts down to 320px across StarkEd frontend viewports. It resolves layout collisions in collaboration rooms, implements responsive card fallbacks for tabular data, handles navigation folding on mobile screen sizes, and implements an interactive 3D WebXR simulation sandbox on unsupported browsers.

Additionally, it resolves a Next.js production build crash by ensuring client-side store hydration on /chat-assistant.

---

Key Changes

1. Global Navigation & Mobile Drawer

• Added MobileNavShell.tsx as a Client-side wrapper in root layout.tsx to handle page routing.
• Modified MobileNav.tsx to render all 8 main routes in the hamburger menu drawer, while restricting the bottom navigation bar to the first 4 main routes (Home, Courses, Analytics, Certificates) to prevent crowding on small mobile viewports.

2. Collaboration Panel Overlays

• Modified ChatPanel.tsx and ParticipantsList.tsx to display as absolute fixed overlays on viewports < 768px instead of shrinking the WebRTC main canvas area, restoring full functionality to WebRTC rooms on mobile.
• Modified ControlBar.tsx button margins, padding, and gaps on mobile to fit all WebRTC options comfortably on a 320px screen while maintaining WCAG-compliant touch targets.

3. Metaverse Spaces HUD

• Modified CampusHUD.tsx to shrink HUD statistics text on mobile.
• Added a toggle button to collapse/expand the "Campus Spaces" list, allowing users to free up virtual screen real estate on touch screens. Hidden keyboard desktop hints on mobile viewports.

4. Interactive 3D WebXR Screen Simulator Fallback

• Refactored WebXREngine.tsx so that devices without native WebXR/VR browser capabilities mount in 3D Screen Simulator Mode instead of rendering a static "Not Supported" block.
• Implemented a draggable CSS 3D wireframe Globe featuring drag-to-orbit pointer gestures (touch and mouse support).
• Wired simulated updates for performance stats, controller coordinate drift, and hand tracking gestures (Open, Pinch, Fist toggles) with WCAG-compliant $\ge 44\text{px}$ touch targets.

5. Progress Dashboard & User Management Table-to-Card

• Modified ProgressDashboard.tsx to wrap main navigation tabs vertically and redesign course progress cards to scale stacked thumbnails and action buttons properly on mobile.
• Modified admin/users/page.tsx to hide the static HTML <table> element on screens smaller than medium (hidden md:block) and dynamically render responsive user cards (grid grid-cols-1 md:hidden) with touch-friendly actions.
• Modified chat-assistant.tsx to prevent Next.js static prerendering crashes during build by deferring Zustand persisted store state hooks to post-client-mount.

---

Verification & Testing

• Responsive Breakpoints Tested: verified fluid layouts at 320px, 768px, and 1024px widths. No horizontal scrollbars.
• Touch Target Size: ensured all interactive icons, buttons, and gesture toggles have a minimum height/width of 44px (WCAG 2.5.5 compliance).
• Build status: pnpm run build ran successfully, exporting and compiling all 122/122 static pages.

Closes #69