Fixed the horizotal page scroll issue for smaller usernames

[Sudarshan-21]

Fixes #2678

Changes:
For resolving this issue there were many design ideas i thought:

1. providing padding or margin so that we will be able to stop the overflow of the dropdown. But crating blank space in the right side of that element would look bad.
2. alignning the dropdown menu right would be another option but as mentioned in the following comment I dropped this idea Clicking hello! username user-menu dropdown causes the console to move when the username is short #2678 (comment)
3. So, the better option was to use different style of dropdown menu
   
   
   So for the longer usernames it stays as before, but for short usernames it shrinks itself below the username.

4.Another proposed idea is to interchange the postion of the language dropdown and username dropdown. @lindapaiste I would like to have your review of my currently created and 4th proposed idea.

I have verified that this pull request:

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

[release-com]

Release Environments

This Environment is provided by Release, learn more!
To see the status of the Environment click on Environment Status below.

• p5.js-web-editor
  • app-ted3a18.release.editor.p5js.org/
  • preview-ted3a18.release.editor.p5js.org/

🔧Environment Status : https://app.release.com/public/Processing%20Foundation/env-f155cff815

[raclim]

Thanks for your work on this! I think this solution doesn't exactly address the original issue, which was referring to the position of the dropdown element affecting the console, rather than the dropdown's overflow, which is somewhat of a separate issue! I think this change might not be what we're looking for, so I'm going to close this for now. I'm sorry that we couldn't get this in, but please feel free to check out our other issues!