Merge branch 'mr-sidebar-sticky' into 'master'

Fix positioning of MR sidebar at bottom of page

See merge request gitlab-org/gitlab!122509



Merged-by: David Pisek <dpisek@gitlab.com>
Approved-by: David Pisek <dpisek@gitlab.com>
Approved-by: Kevin Comoli <kcomoli@gitlab.com>
Co-authored-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>

app/assets/stylesheets/framework/layout.scss

@@ -42,7 +42,7 @@ body {
 
 .content-wrapper {
   padding-top: var(--top-bar-height);
-  padding-bottom: 100px;
+  padding-bottom: $content-wrapper-padding;
 }
 
 .container {

app/assets/stylesheets/framework/sidebar.scss

@@ -492,7 +492,7 @@
             $issue-sticky-header-height: 76px;
 
             top: calc(#{$calc-application-header-height} + #{$issue-sticky-header-height});
-            height: calc(#{$calc-application-viewport-height} - #{$issue-sticky-header-height} - var(--mr-review-bar-height));
+            height: calc(#{$calc-application-viewport-height} - #{$issue-sticky-header-height} - var(--mr-review-bar-height) - $content-wrapper-padding);
             position: sticky;
             overflow: auto;
             padding: 0 15px;

app/assets/stylesheets/framework/variables.scss

@@ -460,6 +460,7 @@ $browser-scrollbar-size: 10px;
  * Misc
  */
 $header-height: var(--header-height, 48px);
+$content-wrapper-padding: 100px;
 $header-zindex: 1000;
 $zindex-dropdown-menu: 300;
 $ide-statusbar-height: 25px;