Add a max-height and scroll bar to code blocks above a certain height.

[choldgraf]

Sometimes it is useful to include really long code blocks (e.g. if you're programmatically generating output), but these take up a lot of vertical space.

Instead of showing the entire block, it might be useful to automatically cap the size of code blocks (to, say, 2/3 of the vertical space, or above a certain number of lines of code) and add overflow-y: auto so that scroll bars show up for really high code blocks.

References

GitHub has a similar UX with its code blocks, e.g.:

[trallard]

This makes sense from a user experience POV.
I also looked at any WCAG criteria that might trip this, but the only one I could think of would be the Reflow 1.4.10 criteria, but code blocks require two-dimensional layout so we are in the exception there (phew).

Though something we might want to consider is giving the pre a tabindex="0" to ensure it is focusable/accessible through the keyboard (right now, the pre is not focusable)

See an example of a focusable pre component from gov.uk

Jan-05-2023.19-02-59.mp4

🤔 do let me know if this should be a separate issue, and we can fix this independently (probably best)

[drammock]

do let me know if this should be a separate issue, and we can fix this independently (probably best)

agree, making pre blocks focusable can be handled in a separate issue I think.

[12rambau]

I don't know about this one. I systematically use the viewcode extention in my libs and it create this kind of pages: https://sepal-ui.readthedocs.io/en/latest/_modules/sepal_ui/aoi/aoi_model.html#AoiModel

let's imagine we effectively wrap things in a y-scrolled frame. I open this page on a small screen where the "max-height" cannot be displayed at once and I enter the classic phone nightmare where I need to scroll everything down to get the content at the bottom: i.e. no improvement with respect to the current implementation.

I don't know if it's clear but that's the same issue as when you have a full width map with touch screen activated, you never know if you zoomon the map or scroll the content.

[choldgraf]

Wouldn't it still be scrollable due to the gutters on each side of the code block? Eg on my mobile phone your link looks like this:

[trallard]

It would be scrollable still - but I also understand where that rationale is coming from. In a tablet and mobile the scrollable targets can be quite small and it's easy to end scrolling or zooming in the wrong place.

Could a workaround be adding breakpoints to add either different max heights for desktop and mobile? This might be useful also for readers who use zooms of 200 or 400 per cent?

[12rambau]

@choldgraf the gutters exist but my fingers are clearly too big (or my screen too small) to make it fluid.
why would it change anything for people using bigger zoom ?

[choldgraf]

@12rambau makes sense - I'll concede that just relying on the gutters is not enough!