cuelang.org: frontend: playground is unusable on mobile

[jpluscplusm]

What page were you looking at?

https://cuelang.org/play

What version of the site were you looking at?

https://github.com/cue-lang/cuelang.org/commit/916ac4fbcfa93f3f40da57ac325e61a9a506d741

What did you do?

I tried to use the playground. I was using mobile Safari on an iPhone 14 running iOS version 17.2.1. A video of the process is shared here: https://share.icloud.com/photos/07bphXnEIljV5rTwVH0EklPSg. (NB iCloud automatically unshares the video on March 22, 2024)

What did you expect?

I expected to be able to use the playground to enter and edit CUE input text, and select/copy/etc output text.

What did you see instead?

As shown in the video, after a couple of scrolls up and down the page, and clicking in the Output section:

• the Input section went blank
• the on-screen keyboard disappeared, and couldn't be reactivated
• what I assume is a floating "enable on-screen keyboard" button (in the bottom right of the Input section) disappeared

This is pretty repeatable, and I've experienced it a few times. The cause isn't definitively "scrolling", but random clicking around the page usually triggers it pretty quickly.

[JorindeUsMedia]

Unfortunately the Monaco Editor (vs code editor) we use for the playground still does not support mobile.

"The Monaco editor is not supported in mobile browsers or mobile web frameworks."
https://microsoft.github.io/monaco-editor/

Also see issues on their github: https://github.com/microsoft/monaco-editor/issues?q=is%3Aissue+is%3Aopen+mobile

I'm not sure what's best to work around this bug. Some suggest to load a different editor on mobile but that seems like a lot of work and hassle. I don't know if mobile-support is on the roadmap for the monaco editor.. (hopefully it is..)

[myitcv]

Let's just see how painful this becomes for people. It's a rather unfortunate state to be in. If things are really bad then we can consider a different editor (for mobile).

[jpluscplusm]

Any scrolling or typing in the text entry field causes the playground to become unusable on (my) mobile.

This prevents me from being able to view all but the smallest portion of most linked-to saved examples (e.g. from Slack), and prevents me from copying either the input or output panes' contents to the phone for sub-optimal editing or examination.

IMHO even a read-only, static rendering of a saved example's playground would be preferable to the/my current mobile experience, which is 100% unusable right now.

[myitcv]

@jpluscplusm please can you do a quick check to ensure this issue is still current?

[jpluscplusm]

@jpluscplusm please can you do a quick check to ensure this issue is still current?

Yes, this issue still strikes. On mobile, the playground currently sits somewhere between frustratingly hard to use and impossible to use.