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

mWeb: Keyboard Shortcuts Content Overflow in Mobile View #2866

Closed arpitghura closed 6 months ago

arpitghura commented 9 months ago

p5.js version

1.9.0

What is your operating system?

Android

Web browser and version

120.0.6099.199

Actual Behavior

The content in the keyboard shortcut is going beyond the parent container (Modal).

image

Expected Behavior

The content should wrap inside the parent container (Modal).

Steps to reproduce

Steps:

  1. Open in Mobile View
  2. Click on three dot Menu
  3. Click on Keyboard Shortcuts
welcome[bot] commented 9 months ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

arpitghura commented 9 months ago

I would like to contribute to this. Can you please assign this to me?

Ri-Sharma commented 9 months ago

Hey @arpitghura, using min-inline-size: max-content; was pretty neat. But there is an problem with max-width: #{500 / $base-font-size}rem; whenever we use a screen size that is wider, there is an abnormal gap between the scroll bar and screen end like following; Screenshot 2024-01-20 224022

So instead of max-width: #{500 / $base-font-size}rem; we can just use width : 100% this would prevent the overflow and prevent the scroll bar problem.

Ri-Sharma commented 9 months ago

Just added that :)

raclim commented 6 months ago

Thanks for raising this issue! I'm going to go with https://github.com/processing/p5.js-web-editor/pull/2932, but I think the resolution for this was definitely found through the solutions of both @arpitghura and @Ri-Sharma!