Add horizontal scroll bar to top of code snippets, or add code wrapping, or reduce height of code snippet area

ChatGPT Feature requests
1

When a code snippet provided by Chat GPT is vertically longer that the viewport,

And you are looking at code in the top of the snippet which exceeds the width of the code snippet area,

You have to scroll down to the bottom of the snippet to locate the horizontal scrollbar, scroll horizontally to the right, and then scroll back up to the top of the snippet (only to find you haven’t scrolled the correct amount to the right).

Having a horizontal scrollbar at the top of the snippet (as well as the bottom), would resolve this issue (although the code in the middle would still be ‘horizontally unscrollable’).

Either that, or just add the ability to wrap the code in the code snippet…

P.S.

It looks like ChatGPT uses highlight.js for the syntax highlighting, and I came across this post:

which states you can enforce code wrapping in highlight.js by adding this style:

white-space: pre-wrap !important;

I tried adding this style to the <code> element in ChatGPT (via Chrome browser dev tools), and it seems to have worked.

So you just need to add a button to the code snippet header that toggles code wrapping by adding and removing this style.

Edit:

Alternatively, just reduce the height of the code snippet area, so you always have the bottom (horizontal) and right (vertical) scrollbars visible.

2

Answering my own post:

  • If you hold down the Shift key and use your mousewheel up and down when the code snippet is selected, the code snippet will scroll horizontally left and right