fix Resolved Discussions counter wrapping to next line

change all .nav-links to use flex
place Resolve Discussions above tabs on small screens, and to the right on large

4 files changed, 41 insertions, 20 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index b6cf5101d60..a30364314cf 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -24,10 +24,10 @@
 }
 
 @mixin scrolling-links() {
-  white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+  display: flex;
 
   &::-webkit-scrollbar {
     display: none;
@@ -35,6 +35,7 @@
 }
 
 .nav-links {
+  display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -42,17 +43,16 @@
   border-bottom: 1px solid $border-color;
 
   li {
-    display: inline-block;
+    display: flex;
 
     a {
-      display: inline-block;
       padding: $gl-btn-padding;
       padding-bottom: 11px;
-      margin-bottom: -1px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
+      white-space: nowrap;
 
       &:hover,
       &:active,
@@ -85,10 +85,10 @@
     .container-fluid {
       background-color: $gray-normal;
       margin-bottom: 0;
+      display: flex;
     }
 
     li {
-
       &.active a {
         border-bottom: none;
         color: $link-underline-blue;
@@ -137,9 +137,9 @@
   }
 
   .nav-links {
-    display: inline-block;
     margin-bottom: 0;
     border-bottom: none;
+    float: left;
 
     &.wide {
       width: 100%;
@@ -336,6 +336,10 @@
     border-bottom: none;
     height: 51px;
 
+    @media (min-width: $screen-sm-min) {
+      justify-content: center;
+    }
+
     li {
       a {
         padding-top: 10px;
@@ -346,6 +350,7 @@
 
 .scrolling-tabs-container {
   position: relative;
+  overflow: hidden;
 
   .nav-links {
     @include scrolling-links();
@@ -483,10 +488,7 @@
 
 .inner-page-scroll-tabs {
   position: relative;
-
-  .nav-links {
-    padding-bottom: 1px;
-  }
+  overflow: hidden;
 
   .fade-right {
     @include fade(left, $white-light);
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index c4210ffd823..291f629c000 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -23,16 +23,6 @@
     .merge-manually {
       @extend .fixed-width-container;
     }
-
-    .merge-request-tabs-holder {
-      &.affix {
-        border-bottom: 1px solid $border-color;
-
-        .nav-links {
-          border: 0;
-        }
-      }
-    }
   }
 
   .merge-request-details {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 87592926930..5b9bf7c7a5a 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -696,6 +696,7 @@
   top: 0;
   z-index: 10;
   background-color: $white-light;
+  border-bottom: 1px solid $border-color;
 
   @media(min-width: $screen-sm-min) {
     position: sticky;
@@ -715,6 +716,16 @@
       padding-right: $gl-padding;
     }
   }
+
+  .nav-links {
+    border: 0;
+  }
+}
+
+.merge-request-tabs {
+  display: flex;
+  margin-bottom: 0;
+  padding: 0;
 }
 
 .limit-container-width {
@@ -725,6 +736,15 @@
   }
 }
 
+.merge-request-tabs-container {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $screen-xs-max) {
+    flex-direction: column-reverse;
+  }
+}
+
 .limit-container-width:not(.container-limited) {
   .merge-request-tabs-holder:not(.affix) {
     .merge-request-tabs-container {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 6d7b7031c30..c613f9f9930 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -614,6 +614,15 @@ ul.notes {
 }
 
 .line-resolve-all-container {
+  @media (min-width: $screen-sm-min) {
+    margin-right: 0;
+    padding-left: $gl-padding;
+  }
+
+  > div {
+    white-space: nowrap;
+  }
+
   .btn-group {
     margin-left: -4px;
   }