Navbar layout breaks when username string length is more than 8 characters

[tridip1931]

I'm submitting a (bug report)

Brief Description

Currently testing and fixing any UI issues I encounter.

What is the current behaviour, (attach relevant screenshots) ?

After login, if the username is more than 10 characters, the username shifts to next line, disrupting the navbar layout. Check screenshot below 👇

What is the expected behaviour ?

It should truncate by adding ... if the username exceeds certain character limit so that the UI component is intact.

When does this occur ?

After login in

How do we replicate the issue ?

1. Open to-fix url
2. Click Login with OSM
3. If your username is less than 8 characters, right click your username, inspect element, and try to add more characters

Please tell us about your environment:

Firefox 55.3, Chrome

Other Information / context:

I am fixing this.