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

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%');
   };

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;

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 {

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);

app/assets/stylesheets/pages/note_form.scss

@@ -362,7 +362,7 @@
 
   .dropdown-menu {
     top: initial;
-    bottom: 40px;
+    bottom: 100%;
     width: 298px;
   }
 

app/views/shared/notes/_comment_button.html.haml

@@ -7,7 +7,7 @@
     = button_tag type: 'button', class: 'btn btn-nr dropdown-toggle comment-btn js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => 'Open comment type dropdown' do
       = icon('caret-down', class: 'toggle-icon')
 
-    %ul#resolvable-comment-menu.dropdown-menu{ data: { dropdown: true } }
+    %ul#resolvable-comment-menu.dropdown-menu.dropdown-open-top{ data: { dropdown: true } }
       %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => 'Comment', 'close-text' => "Comment & close #{noteable_name}", 'reopen-text' => "Comment & reopen #{noteable_name}" } }
         %button.btn.btn-transparent
           = icon('check', class: 'icon')

changelogs/unreleased/38187-38315-fix-dropdown-open-top-bottom-spacing.yml

+---
+title: Fix bottom spacing for dropdowns that open upwards
+merge_request: 14535
+author:
+type: fixed