Improve scrolling for code blocks on phones

[cellio]

https://meta.codidact.com/posts/287468

On a phone, a code block -- which is within a scrollable block -- can be taller than the screen, making it difficult to scroll the post and not the code within the post. Right now the height of the code block is a hard-coded number, and there is no single number that is going to be good for both desktops and phones.

Can we detect that we're on a small screen and set a different (still hard-coded) number? That's probably easiest.

Can we detect the height of the viewport and dynamically set a size that's no more than, say, 75% of the vertical space? That seems harder.

Can we add some sort of "collapse this code block" control (with the inverse "expand" of course), so you can temporarily dismiss a code block that's interfering with viewing the post? (Might be easier than the dynamic option.)

Is there some other way we can improve this? I don't spend a lot of time looking at code on my phone; are there conventions we should be following?

[trichoplax]

I'm not familiar with the specific way Co-Design does things, but in general CSS can be used to set not only a fixed height, but also a maximum height. So we should be able to set a height, that will apply as a default (as currently), and then also set a max-height (to something like the 75% you suggest).

This way we wouldn't need to detect anything - the browser will automatically apply the default height unless that would exceed 75% of the screen/window height.

So the only non-trivial work required here is making sure this is done in a way that is consistent with existing Co-Design code.

[trichoplax]

My other suggestion in that Meta post was to keep the code block taller than the phone screen and make it easier to scroll the page rather than the code block. However, this would probably mean making the margins wider so the user has something to drag other than the code block. The problem with this is that it makes the code block even narrower, on an already narrow phone screen. If anything I'd want those margins to be reduced on mobile, not increased. So my personal leaning is towards limiting the height of the code blocks as described in my previous comment.

[cellio]

I didn't know CSS could do that. That sounds better than trying to do something different for phones; a desktop browser window might be of different sizes, and tablets are quite varied too. If there's a way to push it to the browser to "decide", that sounds better.

I saw the other suggestion (about making scrolling the post easier) but had the same concern you do: to do that we'd need to carve out space beside the code block, and reading code on a phone is already hard so let's not take away even more width. Better if a portion of the containing post is guaranteed to still be visible (and thus draggable) above and/or below the code block. I picked 75% out of thin air; I don't know if that's the right number. I wonder if there's useful prior art.

[trichoplax]

I don't know what percentage would be best either - just wanted to confirm that it's easy to achieve. Once we have it implemented we can fine tune based on feedback. It doesn't even need to be a plain percentage - CSS supports things like this:

height: calc(100vh - 4rem);

This gives 100% of the view height (height of the window) minus the height of 4 lines of default height text. This means someone who has set the default text in their phone browser to be larger than usual will get more space outside the code block to drag the page. (I'm not suggesting we do that without getting feedback first, just giving an example of how flexible CSS can be.)