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.38k stars 1.32k forks source link

Fix keyboard shortcut modal's width for mobile devices #2819

Closed Sanjay-Sahu-Bandla closed 9 months ago

Sanjay-Sahu-Bandla commented 9 months ago

Issue:

The Keyboard Shortcuts modal exhibited horizontal scrolling on mobile devices due to a fixed width.

Solution:

Resolved by adjusting the modal's width property from a fixed value to max-width, enabling responsiveness based on content. This ensures optimal viewing on various screen sizes, enhancing user experience.

Changes:

Before

keyboard-shortcuts-before

After

keyboard-shortcuts-after

I have verified that this pull request:

welcome[bot] commented 9 months ago

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

lindapaiste commented 9 months ago

Both this and #2817 have the same effect on the desktop size. It makes it go to an auto width so the modal becomes a little bit skinner than the current view. I'm going to close this PR and work with #2817 as that one was submitted first.