Expected Behaviour
When viewing a course unit (vertical) on a mobile device, the page layout — including the top navigation tabs (Course, Progress, Dates, Glossary, etc.) and the unit content area — should adapt responsively to the screen width, remaining fully usable and readable.
Actual Behaviour
On mobile devices, the course tab navigation overflows beyond the screen width and the overall page layout does not respond to the mobile viewport. Tabs are pushed off to the right and the content area does not reflow correctly, resulting in a broken and unusable layout on small screens.
https://www.loom.com/share/7ddb5a24ef6448959a54cd1c958140c6
Reproduction Steps
- Open
frontend-app-learning on a mobile/iPad device or a browser resized to a narrow mobile width (e.g. ~390px).
- Navigate to any course and open a unit/vertical page.
- Observe the top tab navigation overflowing off-screen and the broken page layout.
Additional Notes
- Reproduced on the current master.
Expected Behaviour
When viewing a course unit (vertical) on a mobile device, the page layout — including the top navigation tabs (Course, Progress, Dates, Glossary, etc.) and the unit content area — should adapt responsively to the screen width, remaining fully usable and readable.
Actual Behaviour
On mobile devices, the course tab navigation overflows beyond the screen width and the overall page layout does not respond to the mobile viewport. Tabs are pushed off to the right and the content area does not reflow correctly, resulting in a broken and unusable layout on small screens.
https://www.loom.com/share/7ddb5a24ef6448959a54cd1c958140c6
Reproduction Steps
frontend-app-learningon a mobile/iPad device or a browser resized to a narrow mobile width (e.g. ~390px).Additional Notes