enh: redesign email display on phones #11754

CreatorOfBiontium · 2025-09-27T06:44:13Z

Fixes #11663

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

Added a few changes such as the email content will now take the phone's screen full width, the topbar will partly hide itself on scroll, removed blank space under email, ... Signed-off-by: Tobiáš Vašťák <[email protected]>

Align skeleton loading to left for phones < 500px screen width Signed-off-by: Tobiáš Vašťák <[email protected]>

Make the phishing suspicion warning be aligned well with the rest of the content Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium · 2025-09-29T17:52:42Z

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

nimishavijay · 2025-10-01T07:27:35Z

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 · 2025-10-01T07:46:40Z

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 · 2025-10-01T15:54:57Z

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

Before:

Make the email content full screen wide, when screen < 600 px. And a few other fixes Signed-off-by: Tobiáš Vašťák <[email protected]>

Fixes width of an event div, so it matches rest of the content. Signed-off-by: Tobiáš Vašťák <[email protected]>

github-actions · 2025-10-12T02:05:37Z

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 · 2025-10-22T04:41:11Z

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.

Show only one line of the email subject. Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium · 2025-10-22T16:14:52Z

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 · 2025-10-27T15:07:11Z

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 :)

CreatorOfBiontium · 2025-10-28T18:05:05Z

Okay, great! But I still have to make a few small fixes for the animation. After that, it should be ready.

Make the animation of collapsing and expanding subject div less buggy and look a bit better. Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium · 2025-11-05T18:35:36Z

Should be done! What do you think @ChristophWurst

Signed-off-by: Tobias Vastak <[email protected]>

ChristophWurst

Tested, works really well

My nitpick is that I'm not a fan of query selectors and javascript styles. Where possible let's use pure CSS (with conditional classes and breakpoints). There is an isMobile mixin. You should find examples in other components. Use it to add classes specific to mobile.

ChristophWurst · 2025-11-13T17:19:26Z

src/components/Message.vue

 		margin-inline-start: auto;
 	}
+
+	@media (max-width: 600px) {


I think there is a CSS var for the mobile breakpoint. Perhaps that would be a better option that the hard-coded 600px

There is the --breakpoint-mobile: 1024px but 600-1024 px is wide enough to have an email displayed properly with the margin on the left. I'd keep it just for screens < 600px.

Fair point. But for consistency I'd suggest we use the same breakpoint as in other places. There is no downside of the reduced left margin at 600-1024px.

Okay so I'll fix this else in the next commit or in the diffrent pr.

ChristophWurst · 2025-11-13T17:19:33Z

src/components/MessageAttachments.vue

+	bottom: -2px;
 	background: linear-gradient(0deg, var(--color-main-background), var(--color-main-background) 90%, rgba(255, 255, 255, 0));
+
+	@media (max-width: 600px) {


ChristophWurst · 2025-11-13T17:20:57Z

src/components/Thread.vue

 	},

+	mounted() {
+		this.scrollEl = this.$el.closest('.app-content-wrapper') || window


nit: this gives me jquery vibes. is there any other way to achieve this?

It's not jquery, it's native js.

$el is root element of the Vue component
.closest() looks for the closest parent

I'm not sure how else to do this, but I can take a look.

Apologies that my message was confusing. I meant that the coding style reminded me of jQuery due to the element lookup by selector and direct DOM manipulation.

ChristophWurst · 2025-11-13T17:21:09Z

src/components/Thread.vue

 		},

+		_measureHeightsOnce() {
+			const h2 = this.$el.querySelector('#mail-thread-header-fields h2')


use a vue ref

ChristophWurst · 2025-11-13T17:23:06Z

src/components/ThreadEnvelope.vue

+		.left {
+			display: flex;
+			align-items: center;
+			min-width: 0;     /* umožní textu správně zkrátit */


přeložit nebo odstranit komentář

Made a few changes to the code as suggested in pr (and to satisfy lint). Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium · 2025-11-16T19:44:16Z

@ChristophWurst I made a few changes (like using ref instead of query selector) but some, like isMobile that you suggested isn't usable here, as we need to calculate weather to wrap the subject or not (it's not just phone or not). But still I have to make just a few small adjustements before merging - the main is when the subject is way too long (like 100 chars, and yes I received a subject this long for some reason) the animation keeps looping and the second one, I maybe, just maybe forgot to change 2 lines (in code) in the last commit back to what they should have been after testing something 😀

ChristophWurst

The responsive margin left works well. Let's get it in!

Let's leave out the header bar and its animation for now. I'm not fully convinced this is the best/only possible approach, and the animation is jittery right now.

Remove unnecesarry space above subject. Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium · 2025-11-18T17:41:48Z

Okay, but a quick note - I think this concept in general is not bad. I tested it just now and I see it's a bit jiterry, definitely more than it was before. I think with a bit more work it could be the way. Just smooth it out (as it was before) and make it work for subjects > 100 chars. Making such fixes is definitely not hard and would be faster than remaking the whole thing, but if you don't like it, than sure, let's just push in only the responsive margin.

EDIT: This is an edit I didn't expect you to react this fast and didn't want to put another comment 😅

CreatorOfBiontium · 2025-11-24T19:16:27Z

This PR will be split into 2:

feat: make email wide on phone #12074
and the one-line subject on scroll

@ChristophWurst should I fix the animation and make a pr or leave it to someone else?

CreatorOfBiontium added 3 commits September 27, 2025 08:29

enh: displaying emails on phones redesign

95273e2

Added a few changes such as the email content will now take the phone's screen full width, the topbar will partly hide itself on scroll, removed blank space under email, ... Signed-off-by: Tobiáš Vašťák <[email protected]>

enh: align skeleton loading to left

44dda38

Align skeleton loading to left for phones < 500px screen width Signed-off-by: Tobiáš Vašťák <[email protected]>

fix: phishing suspicion alert align

1055abb

Make the phishing suspicion warning be aligned well with the rest of the content Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium force-pushed the enh/full_email_width_on_mobile branch from 8b0c5a7 to 470e39d Compare October 1, 2025 16:04

fix: fullsize email content under 600px

e1a3956

Make the email content full screen wide, when screen < 600 px. And a few other fixes Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium force-pushed the enh/full_email_width_on_mobile branch from 470e39d to e1a3956 Compare October 1, 2025 16:49

fix: event div

28bfd8a

Fixes width of an event div, so it matches rest of the content. Signed-off-by: Tobiáš Vašťák <[email protected]>

github-actions bot added the feedback-requested label Oct 12, 2025

ChristophWurst added the 2. developing label Oct 16, 2025

ChristophWurst assigned nimishavijay Oct 16, 2025

enh: show one line of subject

5233aec

Show only one line of the email subject. Signed-off-by: Tobiáš Vašťák <[email protected]>

enh: pretty animation of collapsing subject

1c50c39

Make the animation of collapsing and expanding subject div less buggy and look a bit better. Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium marked this pull request as ready for review November 5, 2025 18:35

CreatorOfBiontium requested review from ChristophWurst, GretaD and kesselb as code owners November 5, 2025 18:35

Merge branch 'main' into enh/full_email_width_on_mobile

19bb877

Signed-off-by: Tobias Vastak <[email protected]>

CreatorOfBiontium mentioned this pull request Nov 11, 2025

Unsubscribe link overlaps with date and triple-dot button #11988

Open

ChristophWurst added 3. to review and removed 2. developing labels Nov 13, 2025

ChristophWurst reviewed Nov 13, 2025

View reviewed changes

fix: code cleanup

988e343

Made a few changes to the code as suggested in pr (and to satisfy lint). Signed-off-by: Tobiáš Vašťák <[email protected]>

ChristophWurst reviewed Nov 18, 2025

View reviewed changes

fix: remove unnecesarry space

cc10d44

Remove unnecesarry space above subject. Signed-off-by: Tobiáš Vašťák <[email protected]>

CreatorOfBiontium mentioned this pull request Nov 24, 2025

feat: make email wide on phone #12074

Merged

CreatorOfBiontium closed this Nov 24, 2025

enh: redesign email display on phones #11754

enh: redesign email display on phones #11754

Uh oh!

Conversation

CreatorOfBiontium commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Notes

Before

What I've done so far

Uh oh!

CreatorOfBiontium commented Sep 29, 2025

Uh oh!

nimishavijay commented Oct 1, 2025

Uh oh!

CreatorOfBiontium commented Oct 1, 2025

Uh oh!

CreatorOfBiontium commented Oct 1, 2025

Uh oh!

github-actions bot commented Oct 12, 2025

Uh oh!

CreatorOfBiontium commented Oct 22, 2025

Uh oh!

CreatorOfBiontium commented Oct 22, 2025

Uh oh!

nimishavijay commented Oct 27, 2025

Uh oh!

CreatorOfBiontium commented Oct 28, 2025

Uh oh!

CreatorOfBiontium commented Nov 5, 2025

Uh oh!

ChristophWurst left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CreatorOfBiontium commented Nov 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChristophWurst left a comment

Choose a reason for hiding this comment

Uh oh!

CreatorOfBiontium commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CreatorOfBiontium commented Nov 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CreatorOfBiontium commented Sep 27, 2025 •

edited

Loading

CreatorOfBiontium commented Nov 16, 2025 •

edited

Loading

CreatorOfBiontium commented Nov 18, 2025 •

edited

Loading