Fix controls position in gallery layout

css/public.css

@@ -5,9 +5,12 @@ body {
 }
 
 #content {
-	height: initial;
+	/* #content is the previous sibling of the footer, so its height must match
+	 * the height of its child elements to prevent the footer from overlapping
+	 * them. The server sets "height: 100%" for #content, so that value has to
+	 * be overriden. */
+	height: auto;
 	min-height: calc(100vh - 103px); /* 45px(#controls) + 58px(footer) = 103px */
-	overflow: hidden;
 }
 
 /* height fix for ie11 */

css/styles.css

@@ -8,7 +8,6 @@ body:after {
 
 #controls {
 	width: 100%;
-	top: 45px;
 }
 
 .breadcrumbs-droppable-hover {
@@ -82,19 +81,31 @@ div.crumb.last a {
 #content-wrapper {
 	position: relative;
 	height: calc(100vh - 45px); /* 45px for #controls element */
+	top: 45px;
 	padding: 0;
 	overflow-x: auto;
 	-webkit-overflow-scrolling: touch;
 	-webkit-transition: background-color 1s linear;
 	transition: background-color 1s linear;
 }
 
+#app {
+	/* #app is the parent of #controls and #gallery, and #controls uses a sticky
+	 * position, so the #app height must contain the full gallery for the
+	 * controls to be stuck while scrolling. The server sets "height: 100%" for
+	 * the app, so that value has to be overriden. */
+	height: auto;
+}
+
 #gallery.hascontrols {
 	position: relative;
 	overflow: hidden;
 	text-align: justify;
 	padding-bottom: 10px;
 	margin-bottom: 45px;
+
+	/* Override unneeded margin from server */
+	margin-top: 0;
 }
 
 #gallery .row {

js/app.js

@@ -12,7 +12,7 @@
 /* global OC, $, _, Gallery, SlideShow */
 $(document).ready(function () {
 	"use strict";
-	$('#controls').insertBefore($('#content-wrapper'));
+	$('#controls').prependTo($('#app'));
 	Gallery.utility = new Gallery.Utility();
 	Gallery.view = new Gallery.View();
 	Gallery.token = Gallery.utility.getPublicToken();