mWeb: Keyboard Shortcuts Content Overflow in Mobile View

[arpitghura]

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).

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]

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]

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

[Ri-Sharma]

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;

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]

Just added that :)

[raclim]

Thanks for raising this issue! I'm going to go with #2932, but I think the resolution for this was definitely found through the solutions of both @arpitghura and @Ri-Sharma!