dynamic height of asidenav to avoid over-long bodies

templates/widgets/asidenav.julius

@@ -19,6 +19,21 @@
 document.addEventListener('DOMContentLoaded', function() {
 
   var asidenavEl = document.querySelector('.main__aside');
+  var mainContentEl = document.querySelector('.main__content');
+
+  function adjustHeight() {
+    window.requestAnimationFrame(function() {
+      asidenavEl.style.height = mainContentEl.clientHeight + 'px';
+    });
+  }
+
+  // unbeknownst to the user (below the fold),  this happes slightly delayed
+  // because of dynamic changes to the styles inside the main__content
+  setTimeout(function() {
+    adjustHeight();
+  }, 10);
+
+  window.addEventListener('resize', adjustHeight);
 
   window.utils.aside(asidenavEl);
 

templates/widgets/asidenav.lucius

@@ -16,6 +16,13 @@
   }
 }
 
+@media (max-width: 768px) {
+
+  .main__aside {
+    min-height: calc(100% - var(--header-height-collapsed));
+  }
+}
+
 @media (max-width: 425px) {
 
   .main__aside {