Fix size of header menus

[juliusknorr]

Header menus that are bigger than the screen height will now be scrollable:

Fixes nextcloud/external#140

The height is limited here

server/core/css/header.scss

Line 91 in da7bed1

max-height: $header-menu-entry-height * 7.5; // half entry

but I think we should keep this limit since it avoids having lengthy menu bars.

[skjnldsv]

This is an issue on Apple devices as the nav bar is counted in the 100vh. That's why we stopped using it :/

[jancborchardt]

So this needs to be fixed? What’s the proper way to do it?

[skjnldsv]

Use percent. so it depends on the size of the window height. but it's not going to work here as the % would be relative to the header 🤔

[jancborchardt]

Suggested change

	max-height: calc(100vh - #{$header-height});
	max-height: calc(100% - #{$header-height});

[skjnldsv]

Does it works Jan?

[juliusknorr]

No as the 100% are calculated from the parent element (which is the popover trigger button at 50px height)

[juliusknorr]

I have no idea besides the current approach of using at least two times the header height so we have some additional space. Doesn't look to bad to me:

I'm open for suggestions, otherwise we should get this in to at least have some improvement for other browsers.

[skjnldsv]

You won't see the issue with vh on emulator or android devices.
iOS devices does not take the bottom navigation bar of the browser out of the 100vh. Meaning 100vh always include the navigation bar and therefor always scrolls because it's bigger.

[nickvergessen]

This still needs more changes, the right header menu (with the link to settings and the user list) is still having the problem.
And the normal app menu has 2 scroll bars now...

[MorrisJobke]

@juliushaertl What is the status here? We are close to the beta 1. Should this go into 17 or 18?

[nickvergessen]

Btw this is still a problem with the external sites app: nextcloud/external#140

Would be nice if we can fix this (maybe for 17.0.1) and backport it to 17 and 16?

[juliusknorr]

I fixed the duplicate scroll bar by using the existing scroll container. Ready to review from my side.

[nickvergessen]

Fixes the issue with the external sites app now

[skjnldsv]

🐘