Hello, sorry for not adding a description
The changes convert the prev-next area into a floating bar at the bottom, from which users can toggle what side is active, the idea is to have only one side (right or left) active at once.
The accomplish this I:

• Added a main element so the prev-next can be outside of the playground, since one of the sides is going to be hidden in mobile.
• Update prev-next styles to place it somewhat similar to how it was before
• Added a new button to toggle right or left
  Since only one area is rendered at once each side will have the full size of the screen, and in the case of the right side at most of the cases it will have only one scroll, the one in the code panel

The only case where scrolling issue reported will happen again is if the log is too long. But to fix it I needed to make more changes and I think this was good enough for now 😄

I hope that explains it well.

And btw thanks for the great language @lpil !

Great! Thank you!

The styling of the buttons on desktop needs to be changed, it shouldn't have a floating box with rounded corners, it doesn't fit with the existing design.

When there is a lot of code or a lot of output the whole page scrolls on desktop. It should never scroll, rather the code and output sections should scroll.

On mobile the code section doesn't extend all the way to meet the header bar, there's a small gap and a border between them.

The "see code" and "see tutorial" links look a bit strange to me, being positioned with the navigation but having a very different purpose and different styling.

It seems this doesn't resolve #86 as it's still hard to scroll the code section on mobile when it has a scroll bar.