Resolve content overflow issue on mobile devices in keyboard shortcuts modal

[arpitghura]

Fixes #2866

Changes:

1. max-width: #{500 / $base-font-size}rem; on line 5, which makes the content in the list items have a maximum width instead of a width. This prevents the overflow of content on smaller screen sizes. Below is the attached screenshot of this:

Before

After

2. min-inline-size: max-content; on line 27 makes the keyboard shortcut command always have the max-content width, which means the content will not wrap on smaller screen sizes.

Before

After

The second change is not particularly intended for the issue, but this can improve the readability. If you don't want this change, I will remove it.

I have verified that this pull request:

• [X] has no linting errors (npm run lint)
• [X] has no test errors (npm run test)
• [X] is from a uniquely-named feature branch and is up to date with the develop branch.
• [X] is descriptively named and links to an issue number, i.e. Fixes #123

[welcome[bot]]

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

[lindapaiste]

2. min-inline-size: max-content; on line 27 makes the keyboard shortcut command always have the max-content width, which means the content will not wrap on smaller screen sizes.

Before

After

The second change is not particularly intended for the issue, but this can improve the readability. If you don't want this change, I will remove it.

I really like this!

[raclim]

Closing due to reasons laid out on https://github.com/processing/p5.js-web-editor/issues/2866#issuecomment-2027397824, but definitely wouldn't have been able to get there without your suggestions and finding the issue!