Column selector go outside viewport on small screen

[shuuji3]

On a small screen, the button wraps to the left side.

Screenshot

[RYGRIT]

I encountered this problem before. Due to my oversight, the same issue also appeared in other language versions. I saw some similar pull requests (PRs) that also addressed this problem (but only for certain languages).

I just tested it with different languages ​​and found that it works correctly in Japanese and Chinese environments. I suspect the same problem might exist in other language versions as well. Do you have any good solutions? If so, please let me know, and I will start working on fixing this issue later.

Chinese

Japanese

Azerbaijani

[RYGRIT]

I'm considering hiding the label text on smaller screens (showing only the icon), but keeping the label accessible to screen readers. This would prevent text overflow issues in languages ​​with longer text strings. Do you think this approach is feasible?

[shuuji3]

@RYGRIT sorry, I totally missed this comment by flood of notifications 😅 I think hiding the label is a good solution given each language has a different width for the left Relevance dropdown.

[alexdln]

I think the main question here is how the dropdown works - there will always be a situation or language where this select appears at the beginning of a line (for example in linked PR and 360px)

Probably it should be implemented using floating-ui