Primary action menu overlaps with recipient on small screen

[GretaD]

Steps to reproduce

1. Open mail on small screen
2. Look at one thread header

Expected behavior

Nice design

Actual behavior

I cannot read the recipient

Mail app version

3.0.0-beta

Mailserver or service

No response

Operating system

No response

PHP engine version

None

Web server

None

Database

None

Additional info

[GretaD]

@jancborchardt @nimishavijay @ChristophWurst this is a space issue. How should we solve it design wise?

[nimishavijay]

For sure a space issue. As the screen width decreases the items of the primary actually menu could go into the 3 dot menu, starting from the rightmost action (so as the screen size decreases, the Delete action would be the first to go inside the 3 dot menu).

Additionally, since Reply is the most important action here we could show that outside the 3 dot menu always. What do you think?

[ChristophWurst]

More examples

[nimishavijay]

Since there is a lot of useful information shown in that header area, we could also make the avatar smaller to 32px on mobile since there are no actions associated with it. One use of it would be to detect fraudulent mails (for example the fake Frank doesn't have a photo), and that is easy to identify even if the avatar is smaller.

[ChristophWurst]

nextcloud-libraries/nextcloud-vue#3064 will help with this problem