Hide scrollbar in narrow IDE window with hidden device frame

[p-malecki]

This PR addresses the issue of a scrollbar appearing when the IDE window is narrow and the device frame is hidden.
The scrollbar appeared because the touch-area for edge swipe gestures extends beyond the phone content width. To fix this, overflow: hidden is applied for windows narrower than 415px to override overflow: auto in phone-wrapper.

Before	After
Screen.Recording.2024-12-13.at.12.28.07.mov	Screen.Recording.2024-12-16.at.10.48.55.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
radon-ide	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 10:58am

[kmagiera]

Why does this work ok when device frame is present and breaks with frameless mode?

I don't agree swipe gesture isn't practical. It is equally practical regardless of how narrow the screen is

[p-malecki]

Why does this work ok when device frame is present and breaks with frameless mode?

I don't agree swipe gesture isn't practical. It is equally practical regardless of how narrow the screen is

It works with visible device frame, because it covers touch-area. Without it we get extra pixels in each side which cause the scrollbar to appear.

To keep the touch-area unrestricted by the phone-content, I moved the overflow: hidden to the phone-wrapper, and it works better.

Screen.Recording.2024-12-16.at.10.41.25.mov

[kmagiera]

ok, but why 415px is the breakpoint here?

[p-malecki]

ok, but why 415px is the breakpoint here?

In fact, setting overflow: hidden in the phone-wrapper class works as well and also prevents from possible bugs.