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:

[mattermost-build]

This PR has been automatically labelled "stale" because it hasn't had recent activity.
A core team member will check in on the status of the PR to help with questions.
Thank you for your contribution!

[devinbinnie]

@s1Sharp Anything we can do to assist getting this finished?

[s1Sharp]

@s1Sharp Anything we can do to assist getting this finished?

I tried to edit the current implementation so that the window for uploaded files would select the size dynamically. I couldn't find an elegant solution. But there is a working solution within the current implementation. I'll try to post it soon.

[s1Sharp]

I tried to refactor the src/main/views/downloads Dropdown Menu View.ts and src/renderer/downloadsDropdownMenu.tsx files so that the DownloadsDropdownMenu internal shape resizing event sends its dimensions to DownloadsDropdownMenuView, but this will not work in the current implementation. Therefore, I increased the size of the embedded browser window in the src/renderer/constants.ts file. And also slightly changed the css styles for the drop-down menu according to a request from @abhijit-singh

For now it looks:

English

French

Russian

[abhijit-singh]

Thank you @s1Sharp! Looks good to me!