🐛 Bug: Sidebar opening breaks layout on small screens #1949
Description
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: 22Are you working on this issue?
Yes
Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)
Yes