Resolve "Merge request file browser should always be possible show/hide"

3 files changed, 41 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c1666c728f3..e886a54dc99 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -664,3 +664,8 @@ $priority-label-empty-state-width: 114px;
 Issues Analytics
 */
 $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
+/*
+Merge Requests
+*/
+$mr-tabs-height: 51px;
+$mr-version-controls-height: 56px;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index b78f11aadf1..4f804866886 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -9,7 +9,7 @@
     @media (min-width: map-get($grid-breakpoints, md)) {
       position: -webkit-sticky;
       position: sticky;
-      top: $header-height + 51px;
+      top: $mr-version-controls-height + $header-height + $mr-tabs-height;
       margin-left: -1px;
       border-left: 1px solid $border-color;
       z-index: 102;
@@ -19,6 +19,7 @@
 
         .with-performance-bar & {
           top: $header-height + 36px + $performance-bar-height;
+
         }
       }
 
@@ -34,7 +35,7 @@
       }
 
       .with-performance-bar & {
-        top: 127px;
+        top: $header-height + $performance-bar-height + $mr-version-controls-height + $mr-tabs-height;
       }
     }
 
@@ -1026,8 +1027,9 @@
 .tree-list-holder {
   position: -webkit-sticky;
   position: sticky;
-  top: 100px;
-  max-height: calc(100vh - 100px);
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
+  top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
+  max-height: calc(100vh - $top-pos);
   padding-right: $gl-padding;
 
   .file-row {
@@ -1036,8 +1038,9 @@
   }
 
   .with-performance-bar & {
-    top: 135px;
-    max-height: calc(100vh - 135px);
+    $performance-bar-top-pos: $performance-bar-height + $top-pos;
+    top: $performance-bar-top-pos;
+    max-height: calc(100vh - $performance-bar-top-pos);
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 1e4b8d8b7e4..53afb182b54 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -708,6 +708,7 @@
 
 .mr-version-controls {
   position: relative;
+  z-index: 103;
   background: $gray-light;
   color: $gl-text-color;
 
@@ -755,13 +756,37 @@
     color: $orange-500;
     padding-right: 5px;
   }
+
+  @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: $header-height + $mr-tabs-height;
+    width: 100%;
+    border-top: 1px solid $border-color;
+
+    &.is-fileTreeOpen {
+      margin-left: -16px;
+      width: calc(100% + 32px);
+    }
+
+    .mr-version-menus-container {
+      flex-wrap: nowrap;
+    }
+
+    .with-performance-bar & {
+      top: $header-height + $performance-bar-height + $mr-tabs-height;
+    }
+  }
 }
 
 .merge-request-tabs-holder {
   top: $header-height;
   z-index: 200;
   background-color: $white-light;
-  border-bottom: 1px solid $border-color;
+
+  @include media-breakpoint-down(md) {
+    border-bottom: 1px solid $border-color;
+  }
 
   @include media-breakpoint-up(sm) {
     position: sticky;
@@ -816,7 +841,7 @@
   display: flex;
   justify-content: space-between;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(sm) {
     flex-direction: column-reverse;
   }