diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6 index 24423dccf1fd28e0d3b0d3e6f46edc1b061483cb..6c3a1f3307ad3dac180ba1793c22a421c59919dd 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 130103a2702530cd6b61155677ad986f2c29651f..da5c44b5fdc3f140bf42615556d48dd074657306 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;