Ionaru / Ionaru/easy-markdown-editor
Fullscreen toolbar breaks at low resolution
- Dominant language
- JavaScript
- Stars
- 3.1k
- Forks
- 363
- PR merge metrics
- No merged PRs in 30d
Description
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**

Contributor guide
Research direction
Start by reproducing the issue on the easyMDE demo with fullscreen enabled and a browser width smaller than the toolbar. Trace the fullscreen toolbar styling or layout that uses the reported static 50px height; done means the toolbar remains usable at low resolutions without icons spilling into the CodeMirror element.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100