Navigation bar spacing seems uneven

[Jackenmen]

Code of Conduct

• I have read and agree to the project's Code of Conduct

Where did you encounter the bug?

Any page since the navigation bar is always present at the bottom in the mobile layout.

Please describe the bug below

The current spacing used for the navigation bar can cause issues for slightly longer translations in the first and last buttons. While the text-overflow set to ellipsis prevents overspill, it would be great, if the buttons near the edges were closer to the centre to allow for a bit longer labels. As far as I can tell, the first and second buttons have similarly long labels but the free space for the latter would have allowed for a longer label, while the first button's label would have been cut off by that point.

The problem is best seen in Polish:

Polish page

but in Deutsch, there's also a slight issue with how "Wunschliste" eliminates the margin entirely:

Deutsch page

Perhaps the idea here would be to make it so the items are evenly spaced over the available space as even in English, you can see the uneven margins on the left and right edge due to "Watchlist" being a longer word than "Home":

English page

Additional information

No response

[vladjerca]

Yeah, this as an interesting once since if a text doesn't fill-in the full width of the action button it will make it seem as if they're not visually equal.

One quick fix would be to remove labels completely 😅😂

@anodpixels thoughts?

[anodpixels]

Really good catch @Jackenmen
Thanks for pointing this out to us and for the recommendation.
2 quick questions here for you as a user of Trakt:

1. Will the fact that the buttons icons might move horizontally based on the language bother you more than
2. Having the buttons label shortened by "Wunsch..." ? Will this give you enough context?

Also we will look more into supporting more and more languages, interface-wise as we develop more our design system.

[Jackenmen]

Number 2 is how it works today - I think it can be non-obvious what shortened word means, depending on the language. As for 1, I don't think it would bother me, if the button alignment was different between languages as it's not like I'm going to change language regularly (outside of making issues here :)). Personally I will probably continue to use English version of the site but my mom is using it in Polish so I'm hoping to improve situation for that language as well which is why I provided translations + made a bunch of issues (and one discussion).