search

Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.47k stars 320 forks source link

Fullscreen toolbar breaks at low resolution #469

Open mateusumbelino opened 2 years ago

mateusumbelino commented 2 years ago

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

easyMDEFullscreen

Ionaru commented 2 years ago

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

mateusumbelino commented 1 year ago

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 commented 1 year ago

See suggestion/feature request at 553