Bug & Enhancement : Comprehensive Mobile Responsive Design Issues in Learning Module & IDE Improvements

[Devsharma08]

Describe the bug
The JSON Schema Tour learning module has multiple responsive design issues that significantly impact usability on mobile and tablet devices. The layout does not adapt properly to smaller screen sizes, making the interactive learning experience difficult on non-desktop devices.

IDE Enhancement
Rainbow brackets, Indentation guides

Steps To Reproduce

1. Open any lesson (e.g., https://tour.json-schema.org/content/01-Getting-Started/01-Your-First-Schema)
2. Open browser DevTools → Toggle device toolbar
3. Resize to mobile width (375-480px) or tablet (768px)

Observe the layout issues described below

Issues

1. NavBar doesn't collapse on mobile
   All navbar elements stay visible and overlap instead of hiding behind a hamburger menu.

2. Action buttons overlap
   VALIDATE, RESET, NEXT buttons don't wrap or resize on narrow screens.

3. IDE has excessive empty scroll space
   Code editor container height is fixed, creating wasted viewport space.

4. Homepage hero title too large
   "A Tour of JSON Schema" doesn't scale down for mobile.

Expected Behavior
A responsive UI that adapts gracefully across all device sizes:

• Desktop (>1024px) - Full layout (current behavior)
• Tablet (768-1024px) - Simplified navbar, adjusted proportions
• Mobile (480-768px) - Collapsed nav elements, button wrapping
• Small Mobile (<480px) - Minimal navbar, optimized touch targets

Proposed Solution
I would like to work on this comprehensive fix. My approach:

• Add multiple CSS breakpoints (1024px, 768px, 480px) to all affected components
• Progressive navbar collapse - Hide chapter/lesson text on smaller screens
• Fix button container - Use flex-wrap with proper gaps to prevent overlap
• Optimize IDE height - Use auto height with min/max constraints
• Fix Output section - Responsive padding and text wrapping
• Improve content readability - Adjusted padding and font sizes for mobile

Related Issues
This fix would also address:

1. Bug report: Mobile layout breaks on homepage (large side margins, content squeezed) #209 - Mobile layout breaks on homepage
2. Bug : Tour page not adjusted for mobile #138 - Tour page not adjusted for mobile

Device Information

• Browser: Chrome (tested via DevTools)
• Viewports tested: 375px, 480px, 768px, 1024px
• OS: Windows

Screenshots

[Devsharma08]

I would love to work on fixing these responsive issues and adding the IDE enhancements. May I be assigned to this issue?