Implement two different scrolling models for OL and SL.

services/web/public/stylesheets/app/project-list.less

@@ -18,10 +18,12 @@
 }
 
 .project-list-page {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	position: relative;
+	// display: flex;
+	// flex-direction: column;
+	// flex-grow: 1;
+	position: absolute;
+	top: @header-height;
+	bottom: @footer-height;
 	padding-top: 0;
 	padding-bottom: 0;
 	width: 100%;
@@ -37,9 +39,7 @@
 }
 
 .project-list-content {
-	display: flex;
-	flex-direction: column;	
-	flex: 1 0 100%;
+	height: 100%;
 }
 
 .sidebar-new-proj-btn when (@is-overleaf) {
@@ -47,29 +47,31 @@
 }
 
 	.project-list-row {
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
+		height: 100%;
 	}
 		.project-list-container {
-			display: flex;
-			align-items: stretch;
-			flex-grow: 1;
+			height: 100%;
 		}
-
-		.project-list-empty {
-
+		.project-list-content when (@is-overleaf = false) {
+			overflow: scroll;
 		}
 
 		.project-list-sidebar {
 			background-color: @sidebar-bg;
 			padding-top: @content-margin-top;
-			padding-bottom: @content-margin-top;	
+			padding-bottom: @content-margin-top;
 		} 
 
+		.project-list-sidebar when (@is-overleaf) {
+			height: 100%;
+			overflow: scroll;
+		}
+
 		.project-list-main {
 			padding-top: @content-margin-top;
-			padding-bottom: @content-margin-top;	
+			padding-bottom: @content-margin-top;
+			height: 100%;
+			overflow: hidden;
 		}
 
 .project-header {

services/web/public/stylesheets/components/footer.less

@@ -3,6 +3,10 @@ footer.site-footer {
 	border-top: 1px solid @gray-lighter;
 	padding: @footer-padding;
 	font-size: 0.9rem;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+		
 	ul {
 		list-style: none;
 		margin: 0px;

services/web/public/stylesheets/components/navbar.less

@@ -379,7 +379,10 @@
   background-color: @navbar-default-bg;
   border-color: @navbar-default-border;
   padding: @navbar-default-padding;
-
+  position: absolute;
+  top: 0;
+  width: 100%;
+  
   .navbar-brand {
     position: absolute;
     top: 5px;

services/web/public/stylesheets/core/_common-variables.less

@@ -793,6 +793,8 @@
 
 // Custom
 @is-overleaf: false;
+@header-height: 69px;
+@footer-height: 81px;
 
 @content-alt-bg-color: lighten(@gray-lightest, 2.5%);
 

services/web/public/stylesheets/core/ol-variables.less

@@ -1,6 +1,8 @@
 @import "./_common-variables.less";
 
 @is-overleaf: true;
+@header-height: 69px;
+@footer-height: 81px;
 
 // Styleguide colors
 @ol-blue-gray-1 : #E4E8EE;

services/web/public/stylesheets/core/scaffolding.less

@@ -29,9 +29,8 @@ body {
   line-height: @line-height-base;
   color: @text-color;
   background-color: @body-bg;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100vh;
+  position: relative;
 }
 
 // Reset fonts for relevant elements