Fix mweb console

[PiyushChandra17]

Fixes #2631

Changes:

• Added the missing props on SplitPane component in mobile version
• Added stop button above console

fix-mweb-console.mov

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

Looking good. In the existing code we have a gap below the button which we need to maintain. It is the bottom: ${remSize(20)}; which we are overwriting. We could add 20 to the offset from props. We could also change the bottom: ${remSize(20)}; to margin-bottom: ${remSize(20)}; so that it's a separate property which doesn't get overwritten.

I'm also noticing that dragging the console is extremely sluggish when I shrink my browser window to mobile size. I wonder why that is and I want to investigate, but I think it's beyond the scope of this PR.

When you collapse the console the button is too high. We need additional logic in the IDEView. Let me know if you need help with that. I think we probably want to extract the ide.consoleIsExpanded ? consoleSize : 29 part to a variable and use that variable for the offset instead of consoleSize.

[PiyushChandra17]

@lindapaiste Yes i agree it's quite sluggish when it's narrowed down to mobile size. I think we should make a seperate issue for this and fix this problem in another PR. And as far as maintaining the gap below the button is concerned, i am looking at this and probably fix this soon. Thanks!

[lindapaiste]

Looking good! The sluggishness was fixed in another PR so I merged that in. I also fixed the offsetBottom (and assigned an intermediate variable currentConsoleSize so that eslint wouldn't complain about nesting ternary operators).