Clicking on down `chevron` beside clear does not shifts the console to bottom in `mWeb(Safari)` && `mWeb(chrome)`

[PiyushChandra17]

p5.js version

2.9.3

What is your operating system?

Mac OS

Web browser and version

No response

Actual Behavior

Clicking on down chevron beside clear does not shifts the console to bottom in mWeb(Safari) && mWeb(chrome)

chevron-ios.mp4

Expected Behavior

Clicking on down chevron beside clear should shift the console to bottom in mWeb(Safari) && mWeb(chrome)

Steps to reproduce

Steps:

1. Open the editor web app either in iOS(safari) or android(chrome)
2. Click on down chevron beside clear
3. Notice it doesn't shifts to bottom after taping on chevron

[lindapaiste]

Good catch. This is a bug and should be fixed. You can look into how we are doing this on the desktop version and apply that to mobile.

[PiyushChandra17]

@lindapaiste Sure, I am working on it, will raise a PR soon. Also can you please assign this to me. Thanks!

[lindapaiste]

@PiyushChandra17 The issue is missing props on the SplitPane component which is used to resize the console area. On the desktop version this is a controlled component where we store the size in state and pass it down. The critical line is this one, where we shrink the size to 29 (just the size of the top bar) when the console is collapsed.

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

Line 174 in fcbc05e

size={ide.consoleIsExpanded ? consoleSize : 29}

Right now on mobile it is an uncontrolled component but it should be controlled the same way using the same state.

Compare the desktop part:

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

Lines 171 to 179 in fcbc05e

	<SplitPane
	split="horizontal"
	primary="second"
	size={ide.consoleIsExpanded ? consoleSize : 29}
	minSize={29}
	onChange={(size) => setConsoleSize(size)}
	allowResize={ide.consoleIsExpanded}
	className="editor-preview-subpanel"
	>

To the mobile part:

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

Lines 213 to 218 in fcbc05e

	<SplitPane
	style={{ position: 'static' }}
	split="horizontal"
	primary="second"
	minSize={200}
	>

We need to copy the rest of those props, so that it looks like this:

<SplitPane
  style={{ position: 'static' }}
  split="horizontal"
  primary="second"
  size={ide.consoleIsExpanded ? consoleSize : 29}
  minSize={29}
  onChange={(size) => setConsoleSize(size)}
  allowResize={ide.consoleIsExpanded}
  className="editor-preview-subpanel"
>

I would close your existing PR and put in a new one since this is very different.

[lindapaiste]

Once the console is closed the chevron button becomes very hard to click. This is a separate but related issue. You don't have to fix it but you can if you want to.

I went back and looked at the original designs and we had the stop button above the console, rather than in the far bottom right.

We need to pass down the consoleSize as a prop to the FloatingActionButton and override the bottom position to include the additional offset. But only for the "stop" button and not the "play" button. Maybe something like this in the IDEView:

<FloatingActionButton
  syncFileContent={syncFileContent}
  offsetBottom={ide.isPlaying ? consoleSize : 0}
/>

And then make changes to the FloatingActionButton component to use the prop.