Limit Horizontal Scrolling of Output Page to Prevent Loss at Screen Edge

[perminder-17]

p5.js version

No response

What is your operating system?

Windows

Web browser and version

Chrome

Actual Behavior

Currently, when users drag the output page to the right, it continues to scroll indefinitely, which can result in the output page disappearing off-screen.

p5.js.Web.Editor.2.mp4

Expected Behavior

The output page in the code compiler should not be draggable to infinity when the user tries to scroll horizontally. Instead, it should have a limit and stop scrolling at a certain point, for example, at 95% of the screen width. This will prevent users from accidentally losing access to the output page.

W3Schools.Tryit.Editor.mp4

Or, after reaching 100% of the screen width, there should be a noticeable separation or thick strip, clearly indicating the end of the output and distinguishing it from the input section. This design improvement will ensure users have full control over the output while maintaining a clear visual separation between the input and output sections.

Steps to reproduce

1. Open the code compiler.
2. Execute some code that generates a lengthy output.
3. Try to scroll the output page horizontally to the right.

[perminder-17]

@lindapaiste can we work on it?

[avengsum]

@perminder-17 It works fine on my system

p5.js.Web.Editor.-.Google.Chrome.2023-09-30.19-13-06.mp4

[perminder-17]

@perminder-17 It works fine on my system

p5.js.Web.Editor.-.Google.Chrome.2023-09-30.19-13-06.mp4
My issue demands a thick strip of separation. Here u can't see where to hold and drag after it goes out of screen. It can be improved I guess.. @lindapaiste

[Harsha-10]

I would like to work on this issue please assign me to this

[lindapaiste]

@perminder-17 yes please do fix it! I know that the react-split-pane package which we use accepts a maxSize prop. FYI I might not be reviewing any PRs for a while because I need to focus on work.

[Harsha-10]

Okay I will do it

[lindapaiste]

@Harsha-10 @perminder-17

Since @perminder-17 opened this issue report they should have first dibs on fixing it.

[Harsha-10]

@lindapaiste Sorry I thought the mention was mine, yeah I'm dropping now

[perminder-17]

@perminder-17 yes please do fix it! I know that the react-split-pane package which we use accepts a maxSize prop. FYI I might not be reviewing any PRs for a while because I need to focus on work.

Ok no issues. When you will be done with your work then you may review my PRs no problem and no rush at all on that. Thankyou.

[perminder-17]

they should have first d

Okay, I will be working on this issue.

[perminder-17]

@raclim can u please review this and suggest some more thoughts to implement on this website? @lindapaiste