processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.37k stars 1.32k forks source link

Navbar Dropdown causing issue of ui breakdown #2999

Closed rahulrana701 closed 4 months ago

rahulrana701 commented 8 months ago

p5.js version

1.9.0

What is your operating system?

None

Web browser and version

chrome://121.0.6167.85

Actual Behavior

The language selection dialog box on the homepage's navigation bar covers the entire screen, causing a UI issue. While it may not affect all devices, it consistently occurs on mine and potentially for others with similar devices. This problem is observed on both Google Chrome and Mozilla Firefox. To mitigate this, a recommended best practice is to implement a scroll bar within the dialog box, allowing users to navigate language options without disrupting the UI. Recorded instances of the issue on Mozilla Firefox and Google Chrome browsers are available for reference.

https://github.com/processing/p5.js-web-editor/assets/123585591/efe462ae-0de7-4d60-9990-6ddedf0e3a8f

this is done on google chrome

https://github.com/processing/p5.js-web-editor/assets/123585591/c1dfb019-5851-4251-8d75-eb78f96e64d9

the same issue was encountered on the official website using Google Chrome.

https://github.com/processing/p5.js-web-editor/assets/123585591/7ad3325d-d83b-4416-a970-b3871da00fb4

Expected Behavior

It should have a scroll bar to avoid these types of issues on any device. @lindapaiste, I would like to work on this issue

Steps to reproduce

Steps:

  1. Go to p5.js editor home page click on language dialog box.