Very short usernames on narrow browser windows with darkly-compact layout can cause the user-dropdown-menu to overflow out of the viewport

[Pxtl]

Requirements

• This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• Please check to see if this issue already exists.
• It's a single bug. Do not report multiple bugs in one issue.
• It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

I noticed it on lemmy.ca where I think there's some customization to make the layout wider, but I can repro it on sh.itjust.works as well by narrowing the browser window.

Steps to Reproduce

1. Have a very short username and no avatar.
2. Use "darkly-compact" layout in Settings. Looks like I can repro it on other -compact layouts.
3. Narrow your browser window to about 600px wide - narrow enough to be quite usable still, but that the layout is now shrinking.
4. Click the top-right-corner Username dropdown to access profile|settings|logout.
5. Observe that the menu is overflowing outside of the viewport, causing a horizontal scrollbar to appear.

Technical Details

Windows 10
Can repro on both Firefox and Edge.

While the repro steps describe narrowing to 600px because that's how you can do it consistently, on Lemmy.ca it occurs in a maximized browser window on my machine (a standard 1080P display with no custom scaling).

Lemmy Instance Version

BE: 0.18.2 for both instances

Lemmy Instance URL

lemmy.ca