Mattermost-server: In French, hovering the "Flag" icon on the top right makes the display buggy

[Ag3m]

Summary

In French, hovering the "Flag" icon on the top right makes the display buggy. (see screenshot)

Steps to reproduce

It seems that the hover label for the "Flag" icon is longer in French. Thus, on hover, the label needs more space to be displayed. So, on hover, the label is cropped on the right, and a drag bar appears at the bottom of the screen that allows to go to the right of the window on a few centimeters. I'm not sure I'm making sense, look at the screenshot.

Tested on Firefox 60.0.1 on MacOS and Firefox 60.0.1 on Linux.

Expected behavior

The display should not be larger than the window's width.

Observed behavior (that appears unintentional)

This is a screenshot of the right part of my screen.

Possible fixes

I think displaying the label from the left instead of from the bottom could be an easy fix, although not ideal.
Maybe try something like max-width:100%; ?

Sorry for my English......

[amyblais]

Hi @Ag3m! Thank you for reaching out.

I'm able to repro on Mac, latest server version (4.10).

@wget - is this something you'd be able to take a look at through translate.mattermost.com?
Jason pinged you on this issue and I thought this issue sounds similar, but please let me know if this is more than a translation issue.

[wget]

@amyblais Yes, I think this is something it needs a proper fix, because this time, the string will be hard to reduce, otherwise the sentence won't mean anything understandable for the end user. :-/

[wget]

There is definitely an issue with dynamic UI size wrt. the mattermost webapp.

Since the issue happens with other translation as well, I definitely think this should be escalated to the dev team rather to translators.

[amyblais]

Thank you! I will create a ticket for this today.

[amyblais]

Hi @Ag3m! Opened a ticket for this here: https://mattermost.atlassian.net/browse/MM-10750.

[amyblais]

I'll close this issue for now as it can be tracked with the ticket that was opened above.

[wget]

@amyblais Ok no issue. Btw, if you could specify the problem appears with other language as well in order to make it sound less French specific, that will be nice of you :)

[amyblais]

@wget No problem! I edited the ticket to make it less French specific.