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

1. Open the json-schema website on a mobile device or use Chrome DevTools to simulate mobile view.
2. Navigate to the affected json-schema-org/learn and see left navigation drawer button on top right.
3. 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

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