Merge branch '37862-breadcrumbs-mobile' into 'master'

Fix mobile sidebar button to match height of desktop breadcrumbs

Closes #37862

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

2 files changed, 12 insertions, 5 deletions

diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 58e205537ef..8c5bafac637 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -375,8 +375,6 @@ header.navbar-gitlab-new {
   display: flex;
   width: 100%;
   position: relative;
-  padding-top: $gl-padding;
-  padding-bottom: $gl-padding;
   align-items: center;
   border-bottom: 1px solid $border-color;
 }
@@ -388,6 +386,11 @@ header.navbar-gitlab-new {
   align-self: center;
   color: $gl-text-color-secondary;
 
+  @media (max-width: $screen-xs-max) {
+    padding-left: 17px;
+    border-left: 1px solid $gl-text-color-quaternary;
+  }
+
   .avatar-tile {
     margin-right: 4px;
     border: 1px solid $border-color;
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 4d5e3d1eceb..9c404b7e542 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -445,9 +445,8 @@ $new-sidebar-collapsed-width: 50px;
   background-color: transparent;
   border: 0;
   padding: 6px 16px;
-  margin: 0 16px 0 -15px;
+  margin: 0 0 0 -15px;
   height: 46px;
-  border-right: 1px solid $gl-text-color-quaternary;
 
   i {
     font-size: 20px;
@@ -455,7 +454,12 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   @media (max-width: $screen-xs-max) {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 18px;
+    }
   }
 }