Code example in docs is cut off

[jurecuhalev]

Reading docs for mut helper, the example is cut off:

The full example code that should display is:
{{my-child childClickCount=totalClicks click-count-change=(action (mut totalClicks))}}

There is also additional problem that <pre> code is not scrollable left/right anywhere on the page.

Env:
Chrome 72 on macOS on desktop.

[tniezurawski]

@gandalfar

Reading docs for mut helper, the example is cut off:
There is also additional problem that <pre> code is not scrollable left/right anywhere on the page.

That's the same problem. Basically the content is not scrollable. Here, I'm trying to scroll via touchpad and by selecting text and moving to the right. In both cases that doesn't work:

The issue is not easy to solve. Snippets are built on <table> which is a bad choice. I tried to fix that with CSS only but the table is not flexible enough to satisfy all scenarios.

@sivakumar-kailasam Am I right saying that code responsible for the markup of code blocks is in a different repository? 👉 https://github.com/ember-learn/ember-jsonapi-docs/blob/master/lib/markup.js#L76-L88

[sivakumar-kailasam]

@tniezurawski yes, the markup is generated in ember-jsonapi-docs but the styling is a part of this repo. At some point of time we started facing these issues even though we didn't make changes to the related code.

We're working on a new iteration of the api viewer that replaces highlight.js that's used to generate these code blocks with something more modern.

If we can identify a solution for this issue that doesn't require a lot of effort until the new system is released, we can consider it.

[abhilashlr]

@sivakumar-kailasam i’ve tried to fix this issue in the PR that is referenced, could you please take a look?