CSS for code-blocks; limit visible height to fit onscreen and scroll well

[danielfdickinson]

Just wondering if you would be interested in a PR for the following CSS:

.expressive-code .frame {
  max-height: 75vh;
  overflow: auto;
}

.expressive-code .highlight {
  width: max-content;
  height: max-content;
}

.expressive-code .highlight .chroma {
  overflow: visible;
}

1. It makes a code block max height 75% of viewport height.
2. If needed, it has a horizontal scrollbar that stays visible even when you are in middle of the code block and not at the end.
3. Makes sure entire block is accessible via the scrollbars.
4. Makes sure inner .chroma block does not get a horizontal scrollbar (which messes with the scrolling).

[h-enk]

So, you'll get — for example:

In stead of (current implementation):

I see the plusses and minusses of both solutions. I like to stick with the current implementation, also because I think it's much more common practice. You can see much more of the file without interaction, preserving flow understanding. And, if a code block gets too tall, you could use the details shortcode — like I did for example for the Update mounts section in the Doks v1.8 upgrade guide.

[danielfdickinson]

The thing I like about this approach is that is responsive - how long 'tall' is depends on the device. However I'm happy to keep it as custom CSS.

[h-enk]

Yes, I get that — it’s nice. But for me, common practice wins.

[danielfdickinson]

Fair enough. I have gotten frustrated enough with visiting pages with horizontal scrolls at the the bottom of tall code blocks. They were a recent pain point for me, so I wanted to do something different (and I didn't want use pre-wrap). Too each their own!

[h-enk]

You made me wonder, How do I do that? Then I realized, oh yeah — I use the horizontal scroll button on my mouse. 😄

[danielfdickinson]

😆 I missed the memo on that one. The last time I tried getting horizontal scroll to work was some years ago, and it was hit and miss! Nice to know it works in Xfce now (I did a search after reading you message). Now if I can remember I have that option... 👀