Fixed footer to bottom of page (#9860)

website/client/app.vue

@@ -34,7 +34,7 @@ div
 
             div(:class='{sticky: user.preferences.stickyHeader}')
               router-view
-            app-footer
+          app-footer
 
             audio#sound(autoplay, ref="sound")
               source#oggSource(type="audio/ogg", :src="sound.oggSource")
@@ -83,10 +83,14 @@ div
 
   .container-fluid {
     overflow-x: hidden;
+    flex: 1 0 auto;
   }
 
   #app {
     height: calc(100% - 56px); /* 56px is the menu */
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
   }
 </style>
 

website/client/components/appFooter.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.row
+.row.footer-row
   buy-gems-modal(v-if='user')
   modify-inventory(v-if="isUserLoaded")
   footer.col-12(:class="{expanded: isExpandedFooter}")
@@ -117,6 +117,11 @@
 </template>
 
 <style lang="scss" scoped>
+  .footer-row {
+    margin: 0;
+    flex: 0 1 auto;
+  }
+
   footer {
     color: #c3c0c7;
     z-index: 17;