Menu toggle overlaps content

[diemelone]

please add

padding-top: 44px;

for

.app-content-list

otherwise it is hidden behind the app-navigation-toggle

[ChristophWurst]

screenshot?

[diemelone]

Firefox with most recent updates

[ChristophWurst]

@GretaD could you have a look? I don't get it 🙈

@diemelone please try to be more elaborate with your suggestions. Describe what the problem was before and how it's better now. Also with screenshots of design changes it always helps to have a before/after.

[szaimen]

@ChristophWurst I think @diemelone talks about the overlapping hamburger button that you can see in the screenshot...

[diemelone]

yes @szaimen that is what i was talking about, it happens in different apps and mail was the first one i noticed. But it happens in other apps as well.

[diemelone]

How it is:

How it should be:

Further examples:
Calendar

Apps

There are more examples then these two but it should be enough to demonstrate the problem

[ChristophWurst]

Got it, thanks. @GretaD knows more about this as we tried to improve this in the past.

[GretaD]

@diemelone hello,
Yes, there've been couple of discussions on how to fix this overlapping and IIRC we decided not to add padding for app-content-list because it takes more space from the preview of envelops/contacts.
But maybe we want to reconsider, @jancborchardt @skjnldsv what do you think?

[diemelone]

i am not quite sure what you mean by "preview of envelopes/contacts", but adding padding to the described html class doesnt change anything else in my installation.
Do you mean the yellow marked areas? They didn't change.

[GretaD]

i am not quite sure what you mean by "preview of envelopes/contacts", but adding padding to the described html class doesnt change anything else in my installation.

No, the second column, where the envelops are shown - because of the padding added, one message is "gone" (in the end of the list)

[diemelone]

adding the same but negative amount at the end doesn't work?

[GretaD]

adding the same but negative amount at the end doesn't work?

we are working on this ticket now, which means the envelopes will be even wider to fit the tags, which means that more messages will be gone in the end of the list. Im not saying your idea is bad or wrong, I just need our design lead to agree that we can "sacrifice" 2 messages to have the hamburger menu not overlapping.

[jancborchardt]

So the original issue @diemelone described is a duplicate of https://github.com/nextcloud/server/issues/16934#issuecomment-542201187 – with the solution described in my comment. :)

So yes, basically we can add some padding at the top of the envelope list. If we like, we can additionally put something additional on the top there like:

• The "New message" button, with a small "refresh" icon on the right of it
• Or just space there – looks strange though
• The name of the current folder, although I’ve never seen that in another app and it’s just duplicated
• Something else?

[diemelone]

"New Message" would fit there quite well I think, but to keep the overall similar design (e.g. calendar app) I wouldn't change that, instead the foldername like in the photos app would be a good visual fix.
A refresh on the other hand would also be really useful and would probably look good as well

[ChristophWurst]

we are working on this ticket now, which means the envelopes will be even wider to fit the tags, which means that more messages will be gone in the end of the list. Im not saying your idea is bad or wrong, I just need our design lead to agree that we can "sacrifice" 2 messages to have the hamburger menu not overlapping.

@jancborchardt did you read this?

[thstyl2000]

I also think that "delete message" "flagging" and local search would come in very very handy! (I find the frontends of sogo and afterlogic quite nice and good to work with...)

[MarkusKepert]

I have little similar issue with the toggle and i'll improved this a little bit (without much testing) and got this result as a quick fix:

What do you think about this?

[diemelone]

for those that are looking for a quick and dirty fix I think I have got one...

With a border-top that is 44px high everything works fine, I haven't lost any messages like mentioned before and no unwanted scrollbar is created.

I used the custom css app.

---

Screenshots: Padding fix

padding doesn't really do the trick as it only works for the first entry. Using margin creates an unwanted scrollbar.

before scrolling:

after scrolling:

Screenshots: Border-top fix

So I added a border-top for the .app-content-list class, for demonstration purposes in red

before scrolling:

after scrolling:

---

The following css takes effect on multiple apps including mail and contacts. I haven't tried many more, so I don't know all apps that are effected. For the calendar app the second css code is relevant.

/*mail app*/
.app-content-list {
	border-top: 44px solid var(--color-main-background);
}
/*calendar app*/
.fc-media-screen {
	border-top: 44px solid var(--color-main-background);
}

[MarkusKepert]

Thats a great fix. What i didn't see first, that this isnt a problem of mail app. It's problem of Nextcloud core CSS i think

[mat-m]

So yes, basically we can add some padding at the top of the envelope list. If we like, we can additionally put something additional on the top there like:

• The "New message" button, with a small "refresh" icon on the right of it
• Or just space there – looks strange though
• The name of the current folder, although I’ve never seen that in another app and it’s just duplicated
• Something else?

• Refresh button would be useful (And would be perfect if it also includes reload to complete the list of messages after having deleted some)
• Select all button, maybe ? Or at least, the multi-select button and dot

[stale]

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.

[jancborchardt]

Currently there is a fix which makes it look halfway done, with there now being an empty "header bar" which is only there for the menu toggle:

The proper solution would be to move the "New message" and "Refresh" buttons in from the navigation to that area as well, as specified in: #4956 (comment)
(Same for Contacts)

[reos-rcrozier]

Another solution would be something more like this:

Where you always loose a thin little bit of space to the left, and the button actually stays on the menu side and therefore never interferes with the content.

[jancborchardt]

This was already fixed with the redesign in Nextcloud 25 :)