Responsive behaviour of the main tab bar

[krst221]

There are several issues with the main tab bar in smaller screens, and in general, regarding the user name and the open rooms.

First of all, the username is not shown at all on small screens (like the smartphone app), which also makes it annoying to display your user modal, also because there is plenty of space for it to be shown.

Then, when you go above 500px, even without any open room, if the name is long enough it will overflow. For an average length username, just having one tab open will also cause an overflow.

The other big issue is that the container of the tabs doesn't have a maximum width, or a dynamic margin, so with enough open rooms, on any screen, it will lead to disaster.

1024px width

1920px width

I already fixed everything and will create a pull request shortly, this is how all these cases will look like:

Added dynamic maximum width for the username, with text overflow

The username, even if short, will always be visible

I added a dynamic overflow threshold so that it adjusts to the current margin of the tab bar, so that they never cover the username no matter how many rooms are open or the current screen width.

[Zarel]

The Preact client has a fix for the mobile issues. On desktop, we don't flex the username. If you'd like to contribute username flexing to the Preact client, I'd be happy about that. I'm not sure code reviewing old client changes is a good use of my time, sadly.