richdocumentsframe use 100% of mobile screen height

[Andreas-Kainz]

Signed-off-by: Andreas-Kainz [email protected]

• Resolves: Bit of file list visible after resizing window #1608
• Target version: master

Summary

richdocumentframe use 50px less than screen height, which cause ain issue on mobile.

Before

After

[Andreas-Kainz]

@juliushaertl, @eszkadev, @pedropintosilva I only know that I still have the sizing issue on mobile (all browsers) at https://staging.eu.collaboraonline.com server. Maybe the sizing issue is already fixed.

Please let me know.

[juliusknorr]

The 50px offset was needed for conditions where the height could not be properly determined through css on larger iOS devices, though I haven't considered that we actually hide the Nextcloud toolbar on smaller ones.

It is determined by the viewport width

richdocuments/css/mobile.css

Line 1 in cef30f5

@media only screen and (max-width: 768px) {

so it would make sense to only use those 50px if the header is visible then.

[Andreas-Kainz]

If I test try.nextcloud.com or the colabora staging and demo nextcloud account, everywhere I have this issue on my phone. If I remove the max-height: 752px everything work fine. I'm no expert, but I reviewed different machines and everywhere it work within the css rule.

[juliusknorr]

Resizing to 100%-50px would still be required for larger devices (this rule is actually only necessary for Safari on iOS which doesn't work well with the calc(100vh - 50) that is applied form css.

In order to get this in I'd suggest to do a check like this to not apply the 50px offset for the nextcloud header if mobile.css styles apply.

[Andreas-Kainz]

The screenshots were done from my fairphone 3 (1,080x2,160 pixels) with android and chrome or firefox as browser. So there is the issue already, not only on ios with Safari.

I'm sorry that my technical expertise is not good enough to review the suggested change. Is there somewhere a pre-build where I can test the change on the phone? Or at least after the PR was merged to have a look if the issue is fixed?

[juliusknorr]

The screenshots were done from my fairphone 3 (1,080x2,160 pixels) with android and chrome or firefox as browser. So there is the issue already, not only on ios with Safari.

Moobile phones might report a different smaller screen size based on the devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Your fix is totally valid, just that it reverts that the resize 50px offset for iOS.

I'm sorry that my technical expertise is not good enough to review the suggested change. Is there somewhere a pre-build where I can test the change on the phone? Or at least after the PR was merged to have a look if the issue is fixed?

There is no preview environment, but I've committed the change directly to your branch. I need to do a real testing on iOS again, but then we could get this in from my side 👍

[Andreas-Kainz]

As the fix is valid from your side, push it (when CI is ready)

[Andreas-Kainz]

can the MR get to master?

[juliusknorr]

/backport to stable4

[juliusknorr]

/backport to stable3.8

[backportbot-nextcloud]

The backport to stable4 failed. Please do this backport manually.

[juliusknorr]

/backport to stable22

[backportbot-nextcloud]

The backport to stable22 failed. Please do this backport manually.

[juliusknorr]

/backport to stable4