Merge branch '53874-overlap-separator-navbar' into 'master'

Resolve "Fix overlapping separator on the mobile navigation bar"

Closes #53874

See merge request gitlab-org/gitlab-ce!23126

4 files changed, 15 insertions, 18 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index dca89981d81..ce5d36a340f 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -802,11 +802,7 @@
 
 @include media-breakpoint-down(xs) {
   .navbar-gitlab {
-    li.header-projects,
-    li.header-groups,
-    li.header-more,
-    li.header-new,
-    li.header-user {
+    li.dropdown {
       position: static;
     }
   }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index d1ce3a582bb..39410ac56af 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -110,6 +110,10 @@
       }
     }
 
+    .navbar-collapse > ul.nav > li:not(.d-none) {
+      margin: 0 2px;
+    }
+
     &.menu-expanded {
       @include media-breakpoint-down(xs) {
         .title-container {
@@ -117,7 +121,7 @@
         }
 
         .navbar-collapse {
-          display: block;
+          display: flex;
         }
       }
     }
@@ -209,7 +213,7 @@
 
       > a {
         will-change: color;
-        margin: 4px 2px;
+        margin: 4px 0;
         padding: 6px 8px;
         height: 32px;
 
@@ -455,14 +459,11 @@
   color: $indigo-900;
   font-weight: $gl-font-weight-bold;
   line-height: 18px;
+  margin: 4px 0 4px 2px;
 
   &:hover {
     background-color: $white-light;
   }
-
-  @include media-breakpoint-down(xs) {
-    margin-top: $gl-padding-4;
-  }
 }
 
 .navbar-nav {
@@ -509,12 +510,7 @@
       margin-right: -10px;
 
       .nav > li:not(.d-none) {
-        display: table-cell !important;
-        width: 25%;
-
-        a {
-          margin-right: 8px;
-        }
+        flex: 1;
       }
     }
   }
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 474ef25cef7..b7d69539eb7 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -71,7 +71,7 @@
               = link_to admin_impersonation_path, class: 'nav-link impersonation-btn', method: :delete, title: _('Stop impersonation'), aria: { label: _('Stop impersonation') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
                 = icon('user-secret')
           - if header_link?(:sign_in)
-            %li.nav-item.m-auto
+            %li.nav-item
               %div
                 - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in')
                 = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in'
diff --git a/changelogs/unreleased/53874-navbar-lowres.yml b/changelogs/unreleased/53874-navbar-lowres.yml
new file mode 100644
index 00000000000..3b31b8f93fe
--- /dev/null
+++ b/changelogs/unreleased/53874-navbar-lowres.yml
@@ -0,0 +1,5 @@
+---
+title: "Fix overlapping navbar separator and overflowing navbar dropdown on small displays"
+merge_request: 23126
+author: Thomas Pathier
+type: fix