Fix user menu dropdown in chrome && safari when user name is short - Githubissues

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.26k forks source link

Fix user menu dropdown in chrome && safari when user name is short #3171

Open PiyushChandra17 opened 2 weeks ago

PiyushChandra17 commented 2 weeks ago

Fixes #2678

Changes:

Added floating-ui to ensure all modals fit fully within the screen
Added browser specific code to detect safari browser (used conditional rendering accordingly)
Played around in safari browser and seems like overflow: hidden works here: https://github.com/processing/p5.js-web-editor/blob/7e0827805db71868151bdc7783385992446cc859/client/styles/base/_base.scss#L8-L10

Chome:

https://github.com/processing/p5.js-web-editor/assets/47579287/a329256e-f7f0-4d29-afe7-f02e95ce02de

Safari:

https://github.com/processing/p5.js-web-editor/assets/47579287/5639ab73-e8d5-4791-804b-e2428506cb22

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