.app-content-list needs minimum width constraint

[MeCias]

Hello,

after the last update to 0.11.0 I noticed a difference to the layout of the email app that apparently I am not able to adjust. The middle column, where usually the emails are listed, is too narrow all of the sudden.

I am using NC 14.0.3 and have tested it with Firefox 62 and 63. Same behavior.

[ChristophWurst]

I cannot reproduce this all the time, but it happens for me as well sometimes with folders other than the unified inbox.

[ChristophWurst]

@jancborchardt could you have a look please?

[BinkaDroid]

As a workaround I did a change to "mail/css/mail.scss" by adding
.app-content-list { min-width:300px; }
which overrides
.app-content-list { max-width:300px; }
from "nextcloud/core/css/server.scss"

[Kugeleis]

same here: depending on the actual mail selected the middle column shrinks or expands. I could not detect a pattern. Tested with firefox & opera.

[jancborchardt]

Can confirm too lots of times, but also am not sure about the pattern. Possibly HTML mails are forcing the width?

Probably having some sort of min-width for .app-content-list is a good idea anyway? @skjnldsv
Also, the width of that column should not really change during runtime. Maybe it should rather have its width set through percentage or vw? (Edit: vw → viewport width, CSS unit ;)

[ChristophWurst]

vw?

🚗?

[skjnldsv]

Yes you can do this:

flex: 1 1;
min-width: 300px;
max-width: 350px;

[ChristophWurst]

flex: 1 1; min-width: 300px; max-width: 350px;

Works 👍 However different min/max values still cause the column to jump from narrow to wide depending on the selected message. I think the pattern is messages with long sentenses that cause line breaks and therefore the container to expand its width.

@skjnldsv should we fix this in Mail or the server?

[ChristophWurst]

I think the pattern is messages with long sentenses that cause line breaks and therefore the container to expand its width.

Confirming my own suspicion: just add a very long text to the .app-content and its width will expand.

[nextcloud-bot]

GitMate.io thinks possibly related issues are #11403 (The app content width is forced to the app navigation width in IE 11), #6612 (Provide guidelines for app-content lists), #8361 (News App: Configurable/Dynamic width of the feed list), #1979 (Need a nice app icon for share by mail), and #10881 (Makes the notifications area width equal to the contents).