Examples mobile fixes

[kpal81xd]

Fixes #3991
Fixes #5215

• Upgraded mobile code editor for mobile with proper highlighting and theme (read only)
• Fixed controls and code editor styling (clipped under Examples header)
• Made long controls scrollable
• Increased device pixel ratio to of the window (capped at 2)
• Gizmo distance and size invariant for different aspect ratios

Preview

Code editor

Scrollable & Smaller controls

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

[mvaligursky]

Increased device pixel ratio to of the window (capped at 2)

That would possibly have a negative performance impact on fragment limited examples. But considering there is per example control, we can adjust it as needed.

Is there a good way to make the Controls panel less wide so that you can see the example you're adjusted on the side?

[mvaligursky]

Looks great!

[kpal81xd]

Increased device pixel ratio to of the window (capped at 2)

That would possibly have a negative performance impact on fragment limited examples. But considering there is per example control, we can adjust it as needed.

Is there a good way to make the Controls panel less wide so that you can see the example you're adjusted on the side?

I could try but I feel like on smaller screens more controls will overflow to the next line

[kpal81xd]

@mvaligursky made the controls panel shorter since its scrollable so you can see more of the screen

[mvaligursky]

Great solution! Merge away.

[willeastcott]

Love the polish here - awesome!

[Maksims]

How does UI look on high DPI screens, like retina Macs?
Best would be to solve it using CSS instead of whole screen DPI.