Clicking `hello! username` user-menu dropdown causes the console to move when the username is short

[PiyushChandra17]

p5.js version

2.9.3

What is your operating system?

None

Web browser and version

Safari and Version 16.6

Actual Behavior

Inconsistency in hello! username user-menu dropdown in Safari web browser

safari-dropdown.mov

Expected Behavior

user-menu dropdown should be consistent across all web browsers, currently the page gets slightly upwards when user clicks on the dropdown or hovering to translation dropdown

Steps to reproduce

Steps:

1. Open the editor web app in safari web browser
2. Click on hello! username dropdown
3. Notice the inconsistency
4. Same is reproducible when user click the dropdown > hovers to language translation

[lindapaiste]

Looks like the dropdown menu is not positioned properly. It's overflowing off the right side of the page and causing a horizontal scrollbar to appear along the bottom.

I actually think that the undesirable behavior is not browser-specific. The difference is the length of the username. If the username is long enough then the left-aligned menu fits. But if it's short (like "John" in your example) then it overflows.

We might need to give this some thought. Right-aligning would fix the overflow but it could potentially look worse for the longer usernames which don't have the problem. One approach would be would keep the menu left-aligned when it fits while forcing it to stay inside the bounds of the window, but that might be complicated to implement.

[lindapaiste]

We might consider using popper.js or floating-ui to ensure that all modals fit fully within the screen. That would solve this issue and would also solve #2624 in a way that addresses my concern from this comment:

I don't love that we have a style for the share button that depends on where that button appears in the layout. Like if we were to swap the two buttons then we would have to change the offset, which shows that the component is not fully encapsulated. But I'm not thinking of any better way to do it so I think we just deal with it not being "perfect" code.

[aryanas159]

Hey, can I work on this issue?

[PiyushChandra17]

@lindapaiste @raclim I think i was right at the first time, it is browser specific problem. Seems like after implementing floating-ui, we are getting the desired results in chrome browser(for short user-names) but the problem still persists in Safari. I am currently giving this a glance and will raise a PR pretty soon!