Mail: How is decided the messages list width ?

[mat-m]

Question

The current width in 0.11.0 is 300px, less the 5px used for scrollbar and 1px for border, we get 294px.
I find it very small to display meaningful subjects without having to open the message or hover the subject.

For example, the github notification mail "Re: [nextcloud/mail] Synchronize user created folders from IMAP source (#1189)" is truncated to Re: [nextcloud/mail] Synchroniz... because we need to add the drop-down ellipsis.
With 450px width, we get Re: [nextcloud/mail] Synchronize user created folders fro..., so you have more chance to guess the origin issue title without having to hover the subject or click the message.

With wide monitors, we have more horizontal, as many emails do not need full width:

• text mails can be easily wrap to 80-100 chars so around 700px wide.
• most HTML mails fixed their width to guarantee their layout (no comment) (Amazon mails are around 630px wide)
  For tablets using desktop mode, we may need a trade-off (hide the folders list ?) to fit all.

So I don"t exactly know how to process this, but I would suggest to have something like:
If we state the folders list should never have horizontal scroll, on width change, resize messages list and view-panel to have a 33%-66% of the remaining width, with a min-width of 300px for messages list.
I still find 300px too small, but it will hopefully never reach that on my large monitor :)

BTW, we may also challenge how we want to handle folders list width. I have no long folder names (nor depth), so I waste 50px on this one, although I don't know if we wrap, resize or ellipsis when it does not fit the current 300px.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[ChristophWurst]

cc @skjnldsv

[skjnldsv]

cc @jancborchardt abou tthe list width :)

Actually let me answer :p
300 px is a nice alternative. It's a bit small on some screens, but also quite ok on the majority of the others sizes. The main issue is the visual proportions between the navigation bar and the list. Both of them are 300 and looks well balanced. We tried to migrate to something bigger but it looked so much off that we rolled back to a smaller width.

Since we also want to have the option to keep the sidebar open on some apps for wide screens, it will also reduce the overall size of the list. We had to drew a limit somewhere and 300 was our decision :)

[jancborchardt]

As @skjnldsv already explained basically. :) This is a standard across the Nextcloud apps which use this list, including the Contacts app and Mail app.

In the future we can think about making this actually responsive, and e.g. taking 20% viewport width (minimum 250px then) for each of the left navigation, message list, and also right sidebar.

[mat-m]

Fixed width for folders list as a common choice seems logical because it displays the same kind of contents (categorization of data, using few words).

Having a standard to display different contents is not a good thing in my opinion. It should be tailored to the contents to display rather than harmonized through the framework. Usability before sexiness, no ?

Mail subjects are usually longer than contact names.
Rainloop, which as a nice UI, sets the messages list width to 500px, which fits my usage but I understand this can be too wide.
K9-mail, a nice android/ios mail app, hide the folders by default, and apply a 35% ratio for messages list so around 450 px on a 1720px wide viewport.

Although the responsiveness suggested by @jancborchardt is promising, 20% will be too small for me. On my PC, my in-browser viewport is 1790, so 20% will be 358px. 25% will be better if we keep the folders list opened which I advocate for.

Even on my tablet (resolution is 1536 x 2048 on a 8" display, so 320 ppi density):

• In portrait mode, only the messages list is displayed, which is comfortable because you have many information. The folders list is collapsed in the "hamburger" menu which is clickable or left-draggable.
• In landscape mode, the fodlers list is shown, cannot be collapsed and is wider than the messages list.
• Rainloop chooses to narrow folders list rather than messages list, and I think it is a valuable choice.

Smaller viewports like a middle-range smartphone have the same behaviour in portrait and landscape. They are using the same mode as tablet portrait mode, which I find is fine because there is not much data loss.

If we don't have stats about the viewports sizes used, maybe you can setup a poll. I am wondering if I am the only one finding the messages list too narrow.

[skjnldsv]

@jancborchardt I would suggest to have some breakpoints for that then.
We could increase both of the displays accordingly:

• < 1366 : 300px
• 1366 < x < 1600 : 400px
• 1600 < x < 1920 : 500px
• > 1920 : 600px

Simple example, I don't know if those values make sense, but it could be interesting :thinking:

[jancborchardt]

Any specific reason we should do the manual breakpoints though instead of percentages (and a min-width)? That seems to be much more futureproof and will look far better when resizing too.

[skjnldsv]

@jancborchardt because I'm not sure you can apply a percentage to two different elements of a page. We'll have to try I guess :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.