nbCode enhancement(nbCodeOutput overflow)

[Kiloneie]

Currently the nbCode NbBlock has no length limitations on it's output, meaning that if the output is very long, it will overflow trough the main body/content area. This can be easily spotted, but also not, e.g. it might look good for you on your desktop's browser, but it just might overflow on your mobile browser. This causes the mobile browser's page to be from scaled down to the phone's screen to fit perfectly, to have a huge empty space on the right that you won't see until you move any amount to the right. This causes any custom positioning that isn't tied to the structure of the main body, to be completely broken on top of the fact that there is text all the way on the right outside of your view.

Now my solution was to override the nbBlock with the following partial:

nb.partials["nbCodeUnitTestColorized"] = """
{{>nbCodeSource}}
<pre><code class="language-markdown" style = "color:white;background-color: rgba(255, 255, 255, 0);font-size: 12px;">{{>nbCodeOutput}}</code></pre>

Now what this does is, instead of the output overflowing to the right, it will create a horizontal scroll bar just like the one you get if your code(nbCodeSource) overflows. In my opinion this is much nicer and prevents any overflows, which both break non tied to the main body elements like a button, and makes scrolling non centered.

For examples, check ANY of my nimib pages on My github page on a mobile browser. The following link is an example that SHOULD work on a desktop browser with a monitor size of 24inches or smaller: Desktop example of a scrollable nbCodeOutput

[HugoGranstrom]

Yes this is something we would want 👍

[Kiloneie]

Do i need to make a pull request or will you guys do it ?

[HugoGranstrom]

If you want it done anytime soon, you'll have to make a PR yourself. Let's see how the preview on the PR looks and we can take it from there.

[pietroppeter]

while in Nimib Speaking Hours (recorded now) we found the place in the code where such a change should go: https://github.com/pietroppeter/nimib/blob/c7aa19f10405b6052c2dcfa8490dea2f2284f3bf/src/nimib/themes.nim#L77