Responsive Mobile Lesson Player & Curriculum Drawer

Available from: v1.0.73

The lesson player and course navigation sidebar are fully optimized for mobile viewports. Learners can consume course content on phones and small-screen devices without layout breakage, horizontal scrolling, or obscured UI elements.

How It Works

Lesson Player

The lesson player layout reflows responsively at mobile breakpoints. Text, video embeds, images, and document attachments all scale within the available viewport width, maintaining readability and correct proportions on small screens.

Course Navigation Sidebar

On desktop, the curriculum sidebar remains persistently visible alongside the lesson content — no change to the existing experience.

On mobile, the persistent sidebar is replaced by two access patterns:

Pattern	How to Open	Best For
Bottom Sheet	Swipe up or tap the curriculum trigger at the bottom of the screen	Quick, thumb-friendly navigation between lessons
Hamburger Menu	Tap the ☰ icon in the top navigation bar	Browsing the full course outline as an overlay

Both patterns open the curriculum drawer, which lists all sections and lessons in the course. Tapping a lesson closes the drawer and navigates directly to that lesson.

Viewport Behaviour Summary

Viewport	Sidebar Mode	Lesson Player
Desktop (≥ tablet breakpoint)	Persistent sidebar	Full-width content area
Mobile (< tablet breakpoint)	Bottom sheet or hamburger drawer	Full-viewport content area

Notes

No configuration is required. The responsive layout is applied automatically based on the learner's viewport width.
This change is purely presentational — course content, progress tracking, and all backend data remain unaffected.
Learners who previously accessed courses on mobile and experienced layout issues should see an immediately improved experience after this update.