Set height of fixed sidebars with js

2 files changed, 11 insertions, 1 deletions

diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index 24423dccf1f..6c3a1f3307a 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -35,13 +35,16 @@
         window.innerWidth >= sidebarBreakpoint &&
         $(pageSelector).hasClass(expandedPageClass)
       );
+      $(window).on('resize', () => this.setSidebarHeight());
       $(document)
         .on('click', sidebarToggleSelector, () => this.toggleSidebar())
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
         .on('click', 'html, body, a, button', (e) => this.handleClickEvent(e))
         .on('DOMContentLoaded', () => this.renderState())
+        .on('scroll', () => this.setSidebarHeight())
         .on('todo:toggle', (e, count) => this.updateTodoCount(count));
       this.renderState();
+      this.setSidebarHeight();
     }
 
     handleClickEvent(e) {
@@ -64,6 +67,14 @@
       this.renderState();
     }
 
+    setSidebarHeight() {
+      const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight();
+      const diff = $navHeight - $('body').scrollTop();
+      if (diff > 0) {
+        $('.right-sidebar').outerHeight($(window).height() - diff);
+      }
+    }
+
     togglePinnedState() {
       this.isPinned = !this.isPinned;
       if (!this.isPinned) {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 130103a2702..da5c44b5fdc 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -190,7 +190,6 @@
 
 .right-sidebar {
   position: absolute;
-  height: 100%;
   top: $header-height;
   bottom: 0;
   right: 0;