fix: long code blocks overflow in ui. Fixes #8916

[dakotalillie]

Signed-off-by: Dakota Lillie [email protected]

Fixes #8916

This PR addresses an issue where code blocks would overflow their container in the UI.

Before:

After:

I have tested this in Chrome, Firefox, and Safari. Safari does have an issue where the scrollbar does not increase the height of the element (notice the lack of padding below the code block):

Without the hidden overflow-y setting, this would cause an additional vertical scrollbar to appear. I'm inclined to believe this is a bug in Safari, as manually updating any height-related style in the browser, even a random one like "line-height", causes Safari to fix itself:

Screen.Recording.2022-06-10.at.10.16.48.AM.mov

Needless to say, changing the "line-height" in the code does not fix the issue.

I chose to add a scrollbar, rather than wrapping the text, because I find line-wrapped code to be more difficult to read. I can switch approaches if folks would prefer differently, but hopefully this should become a largely moot issue once #8917 is implemented.

I verified to ensure this change does not cause a regression for the bug fixed in #7876. It appears it does not:

Even with the removal of white-space: pre-wrap, the text still wraps due to overflow-wrap: break-word set here.

I had to disable the pre-commit checks to make this commit, as make test runs a test which attempts to clone a private GitHub repository I don't have access to. I was successfully able to run make pre-commit -B.

[tczhao]

LGTM
The PR description is very neat