Fix dropdowns

app/assets/javascripts/environments/components/environment_actions.vue

@@ -75,7 +75,7 @@
       </span>
     </button>
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i">

app/assets/javascripts/pipelines/components/pipelines_actions.vue

@@ -63,7 +63,7 @@
       <loading-icon v-if="isLoading" />
     </button>
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i"

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

@@ -37,7 +37,7 @@
       >
       </i>
     </button>
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(artifact, i) in artifacts"
         :key="i">

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -131,7 +131,7 @@ export default {
             aria-hidden="true">
           </i>
         </button>
-        <ul class="dropdown-menu dropdown-menu-align-right">
+        <ul class="dropdown-menu dropdown-menu-right">
           <li>
             <a
               class="js-download-email-patches"

app/assets/stylesheets/framework/dropdowns.scss

@@ -206,11 +206,10 @@
 .dropdown-menu,
 .dropdown-menu-nav {
-  @include set-invisible;
+  display: none;
   position: absolute;
   width: auto;
   top: 100%;
-  left: 0;
   z-index: 300;
   min-width: 240px;
   max-width: 500px;
@@ -474,11 +473,6 @@
   }
 }
-.dropdown-menu-align-right {
-  left: auto;
-  right: 0;
-}
-
 .dropdown-menu-selectable {
   li {
     a,

app/assets/stylesheets/pages/groups.scss

@@ -36,7 +36,7 @@
     flex: 1;
   }
-  .dropdown-menu-align-right {
+  .dropdown-menu-right {
     margin-top: 0;
   }

app/assets/stylesheets/pages/members.scss

@@ -27,7 +27,7 @@
       display: flex;
     }
-    .dropdown-menu.dropdown-menu-align-right {
+    .dropdown-menu.dropdown-menu-right {
       margin-top: -2px;
     }
   }

app/assets/stylesheets/pages/notifications.scss

@@ -2,7 +2,7 @@
   line-height: 34px;
   .dropdown-menu {
-    @extend .dropdown-menu-align-right;
+    @extend .dropdown-menu-right;
   }
 }

app/assets/stylesheets/pages/projects.scss

@@ -232,7 +232,7 @@
   }
   .notification-dropdown .dropdown-menu {
-    @extend .dropdown-menu-align-right;
+    @extend .dropdown-menu-right;
   }
   .download-button {

app/views/admin/projects/index.html.haml

@@ -15,7 +15,7 @@
             - namespace = Namespace.find(params[:namespace_id])
             - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
           = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
-          .dropdown-menu.dropdown-select.dropdown-menu-align-right
+          .dropdown-menu.dropdown-select.dropdown-menu-right
             = dropdown_title('Namespaces')
             = dropdown_filter("Search for Namespace")
             = dropdown_content

app/views/admin/users/_user.html.haml

@@ -21,7 +21,7 @@
         %a.dropdown-new.btn.btn-secondary#project-settings-button{ href: '#', data: { toggle: 'dropdown' } }
           = icon('cog')
           = icon('caret-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           %li.dropdown-header
             Settings
             %li

app/views/admin/users/index.html.haml

@@ -13,7 +13,7 @@
         .dropdown
           - toggle_text = if @sort.present? then sort_options_hash[@sort] else sort_title_name end
           = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
-          %ul.dropdown-menu.dropdown-menu-align-right
+          %ul.dropdown-menu.dropdown-menu-right
             %li.dropdown-header
               Sort by
             %li

app/views/dashboard/todos/index.html.haml

@@ -35,7 +35,7 @@
           - if params[:project_id].present?
             = hidden_field_tag(:project_id, params[:project_id])
           = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project' } })
+            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project', display: 'static' } })
         .filter-item.inline
           - if params[:author_id].present?
             = hidden_field_tag(:author_id, params[:author_id])
@@ -60,7 +60,7 @@
               - else
                 = sort_title_recently_created
               = icon('chevron-down')
-            %ul.dropdown-menu.dropdown-menu-sort
+            %ul.dropdown-menu.dropdown-menu-sort.dropdown-menu-right
               %li
                 = link_to todos_filter_path(sort: sort_value_label_priority) do
                   = sort_title_label_priority

app/views/explore/projects/_filter.html.haml

@@ -8,7 +8,7 @@
       - else
         Any
       = icon('chevron-down')
-    %ul.dropdown-menu.dropdown-menu-align-right
+    %ul.dropdown-menu.dropdown-menu-right
       %li
         = link_to filter_projects_path(visibility_level: nil) do
           Any

app/views/groups/show.html.haml

@@ -20,7 +20,7 @@
             %input.btn.btn-success.dropdown-primary.js-new-group-child{ type: "button", value: new_project_label, data: { action: "new-project" } }
             %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown" } }
               = icon("caret-down", class: "dropdown-btn-icon")
-            %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-align-right{ data: { dropdown: true } }
+            %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-right{ data: { dropdown: true } }
               %li.droplab-item-selected{ role: "button", data: { value: "new-project", text: new_project_label } }
                 .menu-item
                   .icon-container

app/views/help/ui.html.haml

@@ -230,7 +230,7 @@
         %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           %li
             %a{ href: "#" }
               Dropdown option

app/views/layouts/header/_default.html.haml

@@ -52,7 +52,7 @@
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
                 = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
                 = sprite_icon('angle-down', css_class: 'caret-down')
-              .dropdown-menu-nav.dropdown-menu-align-right
+              .dropdown-menu.dropdown-menu-nav.dropdown-menu-right
                 %ul
                   %li.current-user
                     .user-name.bold

app/views/layouts/header/_new_dropdown.haml

@@ -2,7 +2,7 @@
   = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip qa-new-menu-toggle", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body' } do
     = sprite_icon('plus-square', size: 16)
     = sprite_icon('angle-down', css_class: 'caret-down')
-  .dropdown-menu-nav.dropdown-menu-align-right
+  .dropdown-menu.dropdown-menu-nav.dropdown-menu-right
     %ul
       - if @group&.persisted?
         - create_group_project = can?(current_user, :create_projects, @group)

app/views/projects/branches/index.html.haml

@@ -26,7 +26,7 @@
             %span.light
               = branches_sort_options_hash[@sort]
             = icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
             %li.dropdown-header
               = s_('Branches|Sort by')
             - branches_sort_options_hash.each do |value, title|

app/views/projects/buttons/_download.html.haml

@@ -7,7 +7,7 @@
       = sprite_icon('download')
       = icon("caret-down")
       %span.sr-only=  _('Select Archive Format')
-    %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
+    %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
       %li.dropdown-header
         #{ _('Source code') }
       %li