Improve layout for small resolutions

[fabienrohrer]

• Fix not highlighted code overflow: allow horizontal scroll when required
• Fix texts of the menu overflow: crop it (horizontal scroll is not a good idea there, because scrolling vertically in the menu is recommended.).
• Fix menu arrows overlap
• Fix horizontal scroll bar of the menu shown for no reason
• Test
  • Embedded in Webots
  • Firefox
  • Chrome
  • Safari
  • IE
  • Edge

[fabienrohrer]

The situation is much better now, but still not perfect: if the menu is too small, it becomes unreadable.

I propose to accept this PR as-is, and to explore the solution to put the menu into a resizable panel (as proposed by Stefania in #76) in another PR.

[fabienrohrer]

👍

[stefaniapedrazzi]

It seems that you removed the horizontal scrollbar of the left menu.
Wasn't possible to fix the issues without removing it?

Personally I would keep the horizontal scrollbar and additionally make the left menu resizable.

[stefaniapedrazzi]

In any case all the other issues are fixed and I confirm that now it is already better.

[fabienrohrer]

A better patch is indeed probably possible.
I would propose to accept this as-is if you agree in order to not waste too much time with this, because the solution to have a resizable menu will probably completely change this part of the code.

[stefaniapedrazzi]

It is ok for me to accept this PR as-it-is if the resizable menu will be introduced before releasing Webots 8.5.0.
Otherwise we should at least reintroduce the horizontal scrollbar.

👍

[fabienrohrer]

Ok, I'm working on this this afternoon.