MDX code block imporvements

[eng618]

Summary

Code blocks should have the option to not shrink (i.e. remove the Show More/Less and leave the full text),

Just development

Justification

Makes our tutorials harder to digest

Desired UX and success metrics

The user could see the entire code block presented to them, so there is not extra steps to click Show More/Less.

Also in some cases when the code block is in a nested list and the code box is to small (because #832) the Show More/Less button actually covers some of the text needing to be rendered. (so possible a bug 🐛 as well, maybe some more padding for the button 🤷‍♂️)

Must-have functionality

prop to disable virticle overflow (Show More/Less)

Specific timeline issues / requests

ASAP, we have already ran into issues with multiple people hitting the same issue when going throug this tutorial.

Available extra resources

I could look into it with a bit of guidance.

[aharbis]

In addition to this, I think it would be beneficial to offer a word-wrap toggle, so that horizontal scrolling could be disabled. For example, it's not a great user experience to represent a very long log message in a block this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nor does putting in single back-tick (in-line) code look good:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If the code block could support optional word-wrap or horizontal scroll, that would allow us to better represent wide data (such as log messages) without the user needing to scroll to see the whole message, and never being able to see more than 20% of the message.