Explanation
The top bar on all roblox pages scales with the webpage size in order to fit everything into the bar.
The scaling of the topbar has multiple different ‘stages’ with different elements being adjusted to ensure everything is shown and is tidy. The first couple of these is reducing the length of the search bar and hiding the navigation menu on the left.
The rate that the search bar would be shortened is normally sufficient to ensure everything has sufficient room. However, with longer usernames (20 characters long, possibly 19 too), the rate is no longer sufficient to ensure that everything fits.
6 Character Name: No issue
18 Character Name: No Issue
20 Character Name: Issue
Expected Result:
It is expected that everything would scale correctly, with elements only dropping down when they are meant to.
Actual Result:
The elements to the right of the search bar are forced downwards, overlapping with elements below the top bar.
Reproduction
- Open any page of Roblox where the top bar is visible, while logged into an account with a long username.
- Gradually resize the window in the horizontal direction, reducing the width of the box, so the various methods of compression take effect. (See video in ‘Actual Result’)
- Continue until the elements to the right of the search bar drop down.
Device Info
Operating System: Windows 10
CPU: Ryzen 5 3600
GPU: GTX 1650 Super
RAM: 16GB @ 3600MHz
Browser: Chrome
Tested Resolutions:
2560x1440
1920x1080
1360x768