json-schema-org / json-schema-org/website
🐛 Bug: Mobile Responsiveness Issue on json-schema-org/learn in navigation links
@vtushar06 is already working on this.
Since Aug 5, 2025.
- Dominant language
- HTML
- Stars
- 169
- Forks
- 484
- Avg merge
- 2d 2h
- Merged PRs (30d)
- 6
Description
Describe the bug
In the mobile view, the layout breaks and content overlaps from left navigation drawer. This affects the overall readability and usability of the page.
The issue is clearly demonstrated in the attached screen recording.
when clicking on the titles in the left-side navigation drawer, dropdown opens that overflows from its parent container, breaking the expected layout and going out of bounds. This makes navigation difficult and negatively impacts the user experience on smaller screens.
Steps To Reproduce
- Open the json-schema website on a mobile device or use Chrome DevTools to simulate mobile view.
- Navigate to the affected json-schema-org/learn and see left navigation drawer button on top right.
- Observe on clicking on all link titles or 2 link titles at a time, dropdown open that misaligned or overflowing.
Expected Behavior
The layout should adjust smoothly to mobile screen sizes. All elements should be visible without overlapping, vertical scrolling, or breaking the design flow.
Screenshots
https://github.com/user-attachments/assets/84e37ce9-7ef5-44a9-8bf7-618044fceac1
Device Information [optional]
- OS:Android 13
- Browser:Chrome
- version:115.0.5790.171
Are you working on this issue?
Yes
Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)
No
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.