Fix main content height when Talk sidebar is not shown

The main content minimum height is set in server styles to the full
height minus the footer height. Due to this, when the footer is hidden
the height of the main content needs to be adjusted to ensure that it
takes all the available space.

When the Talk sidebar is shown the page layout is adjusted, including
the CSS styles, and that main content height is increased as needed.
However, when the Talk sidebar is not shown the height is not increased,
so there is a blank area below the main content. Unfortunately it is not
possible to just set an explicit height, as the needed height is
different depending on whether the Talk sidebar is shown or not.

No matter if the Talk sidebar is shown or not the main content height
just needs to fill the available space, so now this is done using
flexbox. This avoids having to set an explicit height and thus works for
both the standard layout and the Talk sidebar layout. Moreover, even if
an explicit height is set somewhere, like in the server or Talk styles,
the flex-grow property implicitly overrides it and ensures that the main
content will fill the available height.

Signed-off-by: Daniel Calviño Sánchez <[email protected]>

src/public.js

@@ -49,6 +49,8 @@ window.addEventListener('DOMContentLoaded', function() {
 		// sidebar is loaded it is moved into the app content. In all cases the
 		// footer is hidden to give the PDF viewer the full height.
 		const footerElmt = document.querySelector('body > footer') || document.querySelector('#app-content > footer')
+		const body = document.querySelector('body')
+		const mainContent = document.querySelector('#content')
 
 		const sharingToken = sharingTokenElmt.value
 		const downloadUrl = generateUrl('/s/{token}/download', { token: sharingToken })
@@ -70,6 +72,14 @@ window.addEventListener('DOMContentLoaded', function() {
 			contentElmt.appendChild(viewerNode)
 			viewerNode.src = viewerUrl
 			footerElmt.style.display = 'none'
+			// The main content height set in server assumes that there will be
+			// a footer. As the footer is hidden the main content needs to grow
+			// to take the available height. This needs to be done with flexbox
+			// so no explicit height needs to be given and it works both for the
+			// standard layout and the layout when the Talk sidebar is shown.
+			body.style.display = 'flex'
+			body.style.flexDirection = 'column'
+			mainContent.style.flexGrow = 1
 		} else {
 			logger.error('Unable to inject the PDF Viewer')
 		}