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>

[skip ci]

Author: danxuliu

src/views/PDFView.vue

@@ -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;
 }