fix: Fix content size

The viewer contents are shown with a bottom margin used to "frame" them,
but the PDF viewer is expected to cover that bottom margin and use the
full height instead.

In mobile devices the viewport height might be larger than the actual
viewport, for example when special UI elements like the navigation bar
are being shown. When that happens, the height of the PDF viewer is
larger than the height of its parent plus the bottom margin (as the
height of the PDF viewer is based on the viewport size, and the height
of its parent is based on the available height), so as the PDF viewer is
vertically centered it ends overlapping the header at the top and being
cut by the end of the page at the bottom.

To solve that, now the height of the PDF viewer is based instead on the
height of its parent plus the bottom margin that needs to be covered.

Besides that, the top margin in the PDF viewer is used to compensate for
the bottom margin in its parent due to being vertically aligned.
Although that works this is now also simplified by aligning the top of
the PDF viewer to the top of its parent.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

Author: danxuliu

js/files_pdfviewer-main.js

@@ -300,8 +300,14 @@ export default {
 
 iframe {
 	width: 100%;
-	height: calc(100vh - var(--header-height));
-	margin-top: var(--header-height);
+	/* The height is increased to cover the full modal content. Note that the
+	 * added height is not related to the header itself, but to the "bottom"
+	 * property of ".modal-container" in the viewer, which just happens to use
+	 * the header height. */
+	height: calc(100% + var(--header-height));
+	/* Align the PDF viewer with the top of the viewer content so it appears
+	 * below its header. */
+	top: 0;
 	position: absolute;
 }