Embedded editor improvements

[TiBiBa]

Description
In this PR we make some improvements to the embedded editor. The editor itself was updated recently to be better responsive, but the embedded editor was left out-of-scope. We make some improvements to the scale-ability, fixing some overflow with long lines of code and automatically grow the editor to the available height.

Fixes
This has no related issue

Example
Old

Fixed

How to test
http://127.0.0.1:8080/embedded/1/?lang=nl&run=true&readOnly=false&program=cHJpbnQgSG9pLCB3ZWxrb20gYmlqIEhlZHkhIEhvaSwgd2Vsa29tIGJpaiBIZWR5ISBIb2ksIHdlbGtvbSBiaWogSGVkeSEgSG9pLCB3ZWxrb20gYmlqIEhlZHkhIEhvaSwgd2Vsa29tIGJpaiBIZWR5IQphc2sgSG9lIGdhYXQgaGV0IG1ldCBqZT8KXyBEdXMgaGV0IGdhYXQ=

[ghost]

👇 Click on the image for a new way to code review

Legend

[jpelay]

Seems to work great!

[jpelay]

There's one problem though, we need to set a value for the height of the editor as well. Otherwise it keeps growing and eats the space for the run button:

[TiBiBa]

There's one problem though, we need to set a value for the height of the editor as well. Otherwise it keeps growing and eats the space for the run button:

I'm unable to re-produce this issue. The min-h-0 class should fix that the button container is always visible. Will look into this tomorrow how to fix.

[TiBiBa]

I tried it with an iframe of just 200px height but it still renders fine:

Do you have an example iframe that breaks the editor?

[TiBiBa]

Hi @jpelay! I think the described issue is fixed. Was a bit of "puzzelen", but all should work now!

[jpelay]

Hi, Timon! Sorry that I wasn't clear enough in my comment, here I add a video about the problem:

2023-12-29.10-12-12.mp4

Here you can see that after adding enough lines, the editor surpasses the height, and there's no scrollbar, the only way to see the previous lines is by pressing the up arrow. Maybe this is just a case of adding an overflow? Also, as you can see the horizontal scrollbar is not shown in the bottom of the editor area, but rather right bellow the content.

[TiBiBa]

Hi, Timon! Sorry that I wasn't clear enough in my comment, here I add a video about the problem:

2023-12-29.10-12-12.mp4

Here you can see that after adding enough lines, the editor surpasses the height, and there's no scrollbar, the only way to see the previous lines is by pressing the up arrow. Maybe this is just a case of adding an overflow? Also, as you can see the horizontal scrollbar is not shown in the bottom of the editor area, but rather right bellow the content.

Thanks for the video! Will try to figure this out.

[TiBiBa]

@jpelay This should finally be fixed, please let me know if it also works for you!

[jpelay]

Seems to be working perfectly now! Thanks for the hard work, Timon!

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).