missized mobile navigation with fr translation

[niol]

9a358cd53f1e6117e3f8fac09c65d70cebf50296 from #1054 made fr messages too long for the mobile nav menu. Either the messages should be made shorter (my preference) or the CSS fixed (not trivial). I can fix this but I'm not sure my preference is what people want.

[jtojnar]

I think I had a fixed CSS somewhere (maybe the vector icon branch).

[Binnette]

Why don't we just hide button's text when area is too small ? Also, current icons for "read/unread" are confusing. I never remember which one is read/unread 😢

Is it possible to change for something like this :

A dark envelope for unread messages, and a light openned one for read messages.

[jtojnar]

The issue with icon alone is that you do not know whether it indicates state or an action. It is ¿usually? expected that icons inside buttons describe the action, see for example play/pause buttons in a media player. Or for something closer, this is what GMail does:

It is consistent with “icons inside buttons denote action” rule, which is the exact opposite of your suggestion.

The text should be able to remove this ambiguity by using a verb, which should make it clear the button describes action.