x/website: go.dev/play UX regressions on mobile compared to play.golang.org

[theckman]

Hello,

I am most often looking at Playground code via an Android phone while helping folks learn Go in the Slack workspace. In this workflow I tend to click links shared in Slack, which open up in a Google Chrome-powered web view. After the migration from play.golang.org to go.dev/play, I'm now recognizing some regressions in the user experience on mobile devices that's making it much harder for me to read code when folks are looking for help.

Attached to the bottom of this issue is a screenshot from my phone. Unfortunately, I can't figure out how to load the old UI to do side-by-side comparisons. So, hopefully the screenshot of the current Playground is sufficient.

Here are the immediate things that jumped out at me.

1. The line number UI elements are visually broken. You can't see the whole number, and I think it's rendering most of them with scrollbars at the bottom?
2. The line numbers are much larger than before. That may be causing the above problem, and I wonder if we could have them take up less space.
3. The code text seems larger than before, which may also contribute to item 2, meaning I cannot see as much code on screen at once.

I seem to remember the old Playground having smaller text by default, which allowed me to zoom in if I needed to see something more closely. With the new Playground I'm more frequently scrolling left and right to read shared code which can make it much harder to grok what you're trying to read unfamiliar code.

[mknyszek]

CC @dmitshur

[rsc]

@theckman, the old play.golang.org site did not have the viewport meta tag, and so mobile browsers rendered it as a desktop-sized site and then shrunk it down to fit the screen. That's clearly sub-optimal in general. The new go.dev/play has the viewport meta tag that tells browsers to actually render the page in the size available on the screen.

The scrollbars under the line numbers I will make go away. A reasonably-sized font is preferable to a tiny unreadable font 99 times out of 100.

[gopherbot]

Change https://golang.org/cl/367976 mentions this issue: _content/css: hide scroll bars under each line number on phone screens

[theckman]

@rsc @dmitshur it still doesn't look right. Line numbers are now getting written over by the code.

Can you re-open this issue as I don't think the CL above fully resolved it.