json-schema-org
🐛 Bug: Sidebar opening breaks layout on small screens
Describe the bug
Opening the sidebar on small screens makes the page wider than the viewport, causing horizontal scrolling and layout shift.
Steps To Reproduce
Open the Tools page Navigate to: /tools
Switch to a mobile viewport Set the browser width to < 1024px (e.g., iPhone 12 / 390px, Pixel 5 / 393px).
Open the mobile sidebar Tap the Tools bar at the top to slide the sidebar in.
Observe the layout shift When the sidebar slides in:
The page content shifts horizontally.
A horizontal scrollbar appears.
The overall page width becomes larger than the viewport.
Close the sidebar The page still keeps the extra width for a moment or permanently (depending on viewport), causing layout instability.
Expected Behavior
The sidebar should slide in without increasing page width.
No horizontal scrolling should appear at any time.
Main content should remain fixed and stable when the sidebar opens or closes.
Screenshots
Device Information [optional]
- OS:Win 11
- Browser:Chorme
- version: 22
Are you working on this issue?
Yes
Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)
Yes
Hi @DivyanshuVortex , thanks for raising the issue. Kindly note that PRs should only be opened after the issue has passed triage and has been officially assigned to you. This helps us keep the process organized and efficient.
Thank you for your understanding and cooperation!
I’ve left a few review comments on your PR. Could you please address them by making the required changes? Thank you!
Hi @Utkarsh-123github — just checking in on #1949 / PR #1950. It’s been two weeks since the last review comments were posted to @DivyanshuVortex. If he’s currently busy, would you mind re-assigning the issue to me so I can open a fresh PR that addresses the outstanding feedback? Thanks!
Hello @singhaditya73 , I make all the required changes required by @Utkarsh-123github and currently waiting for the approval only....