Fullscreen toolbar breaks at low resolution

[mateusumbelino]

While testing a responsive application using easyMDE, I found out that the fullscreen toolbar (which uses a static value of 50px for its height) can very easily be broken when using lots of icons at lower resolutions. When this happens, the icons in the toolbar will "spill out" into the CodeMirror element.

This bug is very easily reproduced, even in the demo site:

To Reproduce
Steps to reproduce the behavior:

1. Go to any instance of easyMDE which displays lots of icons on its toolbar (Ex: https://easy-markdown-editor.tk/)
2. Toggle fullscreen
3. Using tools such as the developer console, reduce the browser window's resolution
4. If the resolution is lower than the toolbar's width, it should break

Screenshots

[Ionaru]

What is the expected behaviour here? The toolbar can either expand to multiple rows or hide icons behind a "more..." dropdown.

[mateusumbelino]

The expected behaviour was the following:

If the icons on the toolbar expland to multiple rows, the toolbar container should also expand to correctly house them.

At the time, the icons would overflow and render above the toolbar container, making them "invade" the textarea below the toolbar. This is visible on the picture sent in my first post.

Is there a way to correctly style the toolbar container so that it correctly contains all the icons, preventing an overflow?

[gh-at-sqh]

See suggestion/feature request at 553