smogon / pokemon-showdown-client

The client for Pokémon Showdown
http://pokemonshowdown.com
GNU Affero General Public License v3.0
562 stars 789 forks source link

Responsive behaviour of the main tab bar #2290

Open krst221 opened 4 weeks ago

krst221 commented 4 weeks ago

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.

image

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.

image

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.

image 1024px width

image 1920px width

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

image Added dynamic maximum width for the username, with text overflow

image The username, even if short, will always be visible

image

image image image

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.