[Docs] Fix bug in playground editor overflowing with size-modifying scrollbar

[Luna-Klatzer]

Is there an existing issue for this?

• I have searched the existing issues

Current State & Issue

With the recent cleanups of the playground a bug was discovered, which causes the playground to incorrectly resize with size-modifying scrollbars.

This is due to the issue that browsers handle the width of a scrollbar usually different from one another and that sometimes it is included in the offsetHeight/offsetWidth properties of an element making it wider/taller than expected, but sometimes they may be just overlay elements with no width i.e. no influence on the element dimensions, like for example on most phone browsers (like with Firefox).

For example on Firefox 116.0 with size-modifying scrollbars this is the result:

Slightly overflowing code editor on the bottom edge

Reference function handling this:

Expected Changes & Improvements

• The existing function setEditorAndConsoleSizes() should be cleaned up, so that the behaviour is more clear and that the code is also more maintainable.
• The overflow bug should be fixed and tested across all major browsers/platforms, i.e. Firefox, Chrome, Edge, Firefox Mobile and Chrome Mobile.

Referenced sites

• https://play.kipper-lang.org/