Ionaru / Ionaru/easy-markdown-editor

Fullscreen toolbar breaks at low resolution

Open
#469 3 comments 0 reactions 0 assignees View on GitHub
Bug
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**

![easyMDEFullscreen](https://user-images.githubusercontent.com/20109773/171732824-34991b3c-d28e-4e16-908c-82a78cbecec1.png)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.