Fix height to big for iPhone when using many apps

[kevin147147]

No description provided.

[kevin147147]

@MorrisJobke

[MorrisJobke]

cc @nextcloud/designers

[MorrisJobke]

@kevin147147 Could you explain the fix and also explain the issue? best with screenshots of before and after?

[kevin147147]

Before

After

[kevin147147]

Look at the bottom of the screenshots. The Dropdown-Menu is now fully visible. Before you could only barely touch the last entry.

It has to do with using the viewport height:
https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

[MorrisJobke]

Could you change this to inherit then it looks perfect ;) We just tested it over here and then it looks how it is supposed to.

[MorrisJobke]

While doing this, amend the commit and add a sign-off message to the commit ;) See https://github.com/nextcloud/server/blob/master/CONTRIBUTING.md#sign-your-work for more details

[kevin147147]

max-height: inherit doesn't do it for me. It then has the same height as before and the menu gets under the safari bar again like before. How did you test it? With a real iOS device? Sadly the responsive design modes in chrome, etc. will not show this bug.

[jancborchardt]

On small screens this would cut off too much? If it only is an issue in Safari mobile, can it be solved differently? (Like max-height: 80% or something else.)

[skjnldsv]

You can also set it to 80vh on mobile yes :)
Just put max-height: unset to .header-left #navigation also then

[kevin147147]

This is how it looks even on horizontal. What smaller devices are you thinking about?

[jancborchardt]

The issue is that there might always be smaller devices out there. iPhones are among the largest, and doing the calculation like "100% minus a set amount of pixels" just seems like not a good way to calculate (yes it was there before, but let's not make it worse :)

Could you try with the 80vh as @skjnldsv mentioned? Thank you 😊

[kevin147147]

Well 80vh just ever so slightly does it in vertical. In horizontal it looks nearly like above just a litte bigger :)

[MorrisJobke]

Let's wait here for #9982 as well, because it fixes the issue on iOS that the control bar of the browser is always there.

[ChristophWurst]

Let's wait here for #9982 as well, because it fixes the issue on iOS that the control bar of the browser is always there.

That PR was merged. @kevin147147 could you please re-verify that the patch is still necessary? There have been lots of changes and fixes for Nextcloud 14 with the apps menu and there's the possibility that your issue has been fixed by that. Thanks!

[kevin147147]

That works

[ChristophWurst]

Perfect. Thank you for your feedback!