Dragging the `Console` is sluggish when browser window is resized to mobile view

[PiyushChandra17]

p5.js version

2.9.3

What is your operating system?

Mac OS

Web browser and version

No response

Actual Behavior

Dragging the Console is sluggish when browser window is resized to mobile view

Expected Behavior

Dragging the Console should be smooth and not sluggish when browser window is resized to mobile view

Steps to reproduce

Steps:

1. Open the editor web app
2. Resize the window till it's mobile size
3. Notice dragging of console is not smooth

[lindapaiste]

I am not sure why this is happening so it may be tricky to debug. We probably want to play around in the "Profiler" in React dev tools and see if there is anything alarming.

[lindapaiste]

I found the issue by Googling: tomkp/react-split-pane#30 The problem is that the drag stops when the mouse goes over the iframe that renders the sketch. We are solving this on desktop with an invisible div over the sketch.

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Lines 194 to 197 in f508f52

	<div
	className="preview-frame-overlay"
	style={{ display: isOverlayVisible ? 'block' : 'none' }}
	/>

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Lines 155 to 163 in f508f52

	<SplitPane
	split="vertical"
	defaultSize="50%"
	onChange={() => {
	setIsOverlayVisible(true);
	}}
	onDragFinished={() => {
	setIsOverlayVisible(false);
	}}

[lakshz]

@lindapaiste I want to work on this. Can this be assigned to me?