search

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.3k stars 1.27k forks source link

Overflow Issue in Upload Modal #2983

Closed Keshav-0907 closed 5 months ago

Keshav-0907 commented 5 months ago

p5.js version

v2.11.0

What is your operating system?

Mac OS

Web browser and version

Brave v1.61.109

Actual Behavior

When uploading a large number of assets (8+) , the upload modal leads to a UI overflow issue, disrupting the user interface.

https://github.com/processing/p5.js-web-editor/assets/91189139/f7b156d5-e422-4ced-a224-17af9fd5e888

Expected Behavior

A potential solution to address this issue during asset uploads can be to implement the overflow: scroll on the modal

Steps to reproduce

Steps:

  1. Go to p5 Web Editor
  2. Try to upload more than 8-10 assets
  3. Notice the overflow in the Upload modal
lindapaiste commented 5 months ago

A max-height with overflow: auto sounds good. Always use “auto” instead of “scroll” — “auto” shows the scroll bar only if the contents are too large to fit, but “scroll” will show the scrollbar all the time.

You should check how we are handling it in other modals. Specifically the KeyboardShortcuts and the AddToCollection ones, as those have a lot of content. It’s possible that this is something which should be done in the core component, where we make sure that all overlays cannot be too big for the screen.