Merge branch '38187-38315-fix-dropdown-open-top-bottom-spacing' into 'master'

Fix bottom spacing for dropdowns that open upwards

Closes #38187 and #38315

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

5 files changed, 8 insertions, 2 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 50d822eba5a..ff218ccad62 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -548,6 +548,7 @@ GitLabDropdown = (function() {
   GitLabDropdown.prototype.positionMenuAbove = function() {
     var $menu = this.dropdown.find('.dropdown-menu');
 
+    $menu.addClass('dropdown-open-top');
     $menu.css('top', 'initial');
     $menu.css('bottom', '100%');
   };
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 5c397470629..fa92d4ccf4f 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -745,6 +745,10 @@
   #{$selector}.dropdown-menu-nav {
     margin-bottom: 24px;
 
+    &.dropdown-open-top {
+      margin-bottom: $dropdown-vertical-offset;
+    }
+
     li {
       display: block;
       padding: 0 1px;
diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss
index 3abf3e4ac7d..7899be2c2d3 100644
--- a/app/assets/stylesheets/framework/new-nav.scss
+++ b/app/assets/stylesheets/framework/new-nav.scss
@@ -295,7 +295,7 @@ header.navbar-gitlab-new {
 
 .header-user .dropdown-menu-nav,
 .header-new .dropdown-menu-nav {
-  margin-top: 4px;
+  margin-top: $dropdown-vertical-offset;
 }
 
 .breadcrumbs {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index e8bb42f4a8c..9bbda87dec9 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -327,6 +327,7 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
 * Dropdowns
 */
 $dropdown-width: 300px;
+$dropdown-vertical-offset: 4px;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
 $dropdown-empty-row-bg: rgba(#000, .04);
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index be4db597689..74d9acb5490 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -362,7 +362,7 @@
 
   .dropdown-menu {
     top: initial;
-    bottom: 40px;
+    bottom: 100%;
     width: 298px;
   }