Fix: Adjust dropdown menu item layout for better text fitting

[s1Sharp]

Summary

• Updated the styling of .DownloadsDropdownMenu__MenuItem to improve text fitting and prevent text overlap.
• Changed height to fit-content(25%) to ensure the menu items dynamically adjust to content size.
• Added flex-grow: 1 to allow the items to expand and occupy available space within the menu.
• Added padding-right: 20px to ensure text does not touch the right edge of the menu.

Device Information

This PR was tested on: Ubuntu 22.04

Screenshots

I have tested it in 3 different languages (English, Russian, French). Some of them had problems with text overlapping in the download menu tab. Other languages with long translations also have overlapping text.

Before Changes:

English

French

Russian

After Changes:

English

French

Russian

Updated the styling of `Downloads Menu` to improve text fitting and prevent text overlap.

[mattermost-build]

Hello @s1Sharp,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

[devinbinnie]

Thanks for the PR @s1Sharp. The differences are definitely apparent with French/Russian, but with English it still looks like the text is too big for the menu size.

I'm wondering if we should increase the menu width a little bit, or better yet, force the inner div to be a bit smaller so that word wrap is turned on for that menu item that's stretched over. Thoughts?

[s1Sharp]

I'm wondering if we should increase the menu width a little bit, or better yet, force the inner div to be a bit smaller so that word wrap is turned on for that menu item that's stretched over. Thoughts?

I assume you wanted to see something similar with line breaks in the English version?

Eng with right padding

This is easy to get. Need add padding from the right of 20px. There is already padding on the left.
padding-right: 20px;

[devinbinnie]

I'm wondering if we should increase the menu width a little bit, or better yet, force the inner div to be a bit smaller so that word wrap is turned on for that menu item that's stretched over. Thoughts?

I assume you wanted to see something similar with line breaks in the English version?

Eng with right padding
This is easy to get. Need add padding from the right of 20px. There is already padding on the left. padding-right: 20px;

Yeah that looks great!

[s1Sharp]

I'm wondering if we should increase the menu width a little bit, or better yet, force the inner div to be a bit smaller so that word wrap is turned on for that menu item that's stretched over. Thoughts?

I assume you wanted to see something similar with line breaks in the English version?
Eng with right padding
This is easy to get. Need add padding from the right of 20px. There is already padding on the left. padding-right: 20px;

Yeah that looks great!

For now it looks:

English

French

Russian

[devinbinnie]

Code LGTM! Thanks @s1Sharp!

Will need some input from our UX team.

[abhijit-singh]

Thanks @s1Sharp! This is a great improvement! Preventing overflow and the 20px right padding helps so much.

I had just a couple of suggestions:

1. Can we increase the width of the menu container based on the text, upto a maximum of 200px? Menu items don't have to be wrapped if we actually have the horizontal space.
2. The menu items seem to be getting vertically squished a bit because of some options wrapping to multiple rows. Ideally, the minimum height for a menu item should not be less than 36px. We shouldn't have restrictions on the overall height of the popover menu and it can be taller.

Here's how it can look with these changes:

English:

French: