Conduct responsive design audit and fix mobile layout issues

[jobbykings]

Description

While TailwindCSS responsive utilities are used, many components (AR/VR, 3D lab, Metaverse, BCI dashboards) are primarily designed for desktop. Mobile users — a significant demographic for education platforms — need full functionality. Audit all pages at 320px, 768px, and 1024px breakpoints.

Files to Modify

• frontend/src/components/Mobile/MobileNav.tsx — Ensure all routes accessible
• frontend/src/components/Collaboration/ — Mobile-responsive collaboration
• frontend/src/components/Metaverse/ — Responsive 3D views
• frontend/src/components/ARVR/ — Fallback for non-VR devices
• frontend/src/components/Dashboard/ — Mobile dashboard layout
• frontend/src/app/layout.tsx — Responsive layout shell

Definition of Done

• All pages functional at 320px width (small mobile)
• Navigation collapses to hamburger on mobile
• Tables convert to card layouts on small screens
• Touch targets ≥ 44px (WCAG 2.5.5)
• No horizontal scroll at any breakpoint
• Mobile Lighthouse score ≥ 80

[Agbasimere]

Hi, I'd like to work on this issue.

[grantfox-oss]

🦊 GrantFox — @Agbasimere has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #69)
2. Your PR will be reviewed by the Epondia maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Agbasimere's PR #89 was approved and merged by @jobbykings.

🏆 @Agbasimere: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,108 total points). Track your full progress on GrantFox.

👏 Great work, @Agbasimere! Keep contributing to Epondia.