Screen height on tablet vs keyboard

[microbit-grace]

Aim

Previously (https://github.com/microbit-foundation/python-editor-v3/issues/11), "If we stick with a bottom toolbar then the keyboard on iPad is problematic. On Android the viewport resizes. On iOS it's overlapped."

This PR aims to update the tablet UI behaviour such that the keyboard now overlays the UI for iOS and Android. This behaviour is alines with the keyboard experiences in the Raspberry pi and MakeCode editor.

In the instance where the height is shorter than what the sidebar allows, the entire UI will become scrollable in the Y-direction such that the min-height of the UI is the height of the side bar.

In the instance where the width is shorter than what the simulator width + sidebar width allows, the entire UI will become scrollable in the X-direction such that the min-width will be simulator width + sidebar width.

Still to do

• Fix space underneath when using Android phone
• Fix scenario where the expanding of the sidebar option somehow adds space under and on the right. I think the right hand side gap is due to the Simulator expansion button. No idea what is causing the space underneath.

To do for future

• Spacing for bottom action bar buttons (hamburger-like mechanism for save and open)
• "An error occurred loading the toolkit." when opening the Reference tab on the iPad when visiting review link of Python Editor.

[github-actions]

Preview build will be at
https://review-python-editor-v3.microbit.org/keyboard/

[microbit-grace]

This fixes some of the extra space around the UI that is added when the simulator is collapsed. visibility: hidden does not change the layout of the document, display: none does.

[microbit-grace]

Not needed since we are aiming to have the keyboard overlay the UI instead of having a shifting action bar