enh: redesign email display on phones

[CreatorOfBiontium]

Fixes #11663
This is a draft PR - I need to get feedback from @nimishavijay

Changes

• Email content now takes the full screen width on phones
• Topbar partly hides itself on scroll
• Removed blank space under the email content
• Added 5px border-radius to the email content
• Added 5px margin between the email content and the reply button

Notes

• Tested with various messages, looks fine so far
• Needs more testing before marking as ready for review

Before

Mail.-.Nextcloud.-.Google.Chrome.2025-09-27.00-29-49.mp4

What I've done so far

Mail.-.Nextcloud.-.Google.Chrome.2025-09-27.00-31-36.mp4

[CreatorOfBiontium]

What do you think @nimishavijay ? Any suggestions or ideas?

[nimishavijay]

Looks really nice! :) thanks for cleaning up the sticky header and the bottom spaces in addition. I see that right now the participants are sticky while I think it would make more sense of the title is sticky, don't you think?

So I would suggest some small changes:

• make the title sticky on scroll instead of the participants
• for multi line titles ellipsize the title on scroll. So we are showing only ine line of the title on scroll, but to indicate that there is more we show the "..." Would that be possible?

[CreatorOfBiontium]

Okay, sure, makes sense to me :) So on scroll, it will display the first line of the subject and the parcipiants below, like it does when not scrolling. Then I have to fix the issue with unsubscribe button overlapping actions menu and that should be all

[CreatorOfBiontium]

And also... could this PR contain something like this? I think it looks better, what's your opinion on this @nimishavijay

Before:

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

[CreatorOfBiontium]

Update: I'll get back to this as soon as I can. Only the unsub button is remaing. I will post how it looks, hopefully, later today.

[CreatorOfBiontium]

I made a few changes and now it looks like:

progress_update.mp4

The animation can be a bit buggy, I'll try to fix that next time.
The other thing is the unsub button. Now it doesn't overlap, but it doesn't show the whole email adress. That is yet to be fixed.
What do you think @nimishavijay @ChristophWurst

[nimishavijay]

Awesome! Looks really nice :)

Regarding the unsubscribe button, it's definitely an improvement. It would be difficult to make sure that an email address of any length is shown fully if we want to keep the unsubscribe button on the same row, so I would say we should either

• allow to click on the sender to see the email address in detail, or
• move the unsubscribe button to the next line.

Since there are already many elements between the sender details and the body (phishing warning, show images warning, etc) I would vote for clicking on the sender to see the full email address (similar to what Gmail does in mobile).

The unsubscribe fix can be done in a follow up btw! This is a great place to wrap up this PR design wise :)