Merge branch '37349-fix-mobile-dropdown-size-position' into 'master'

Make dropdown menus on navigation to use full viewport width

See merge request !14086

app/assets/stylesheets/framework/dropdowns.scss

@@ -837,17 +837,30 @@
   }
 }
 
+@media (max-width: $screen-xs-max) {
+  .navbar-gitlab {
+    li.header-projects,
+    li.header-more,
+    li.header-new,
+    li.header-user {
+      position: static;
+    }
+  }
+
+  header.navbar-gitlab .dropdown {
+    .dropdown-menu,
+    .dropdown-menu-nav {
+      width: 100%;
+      min-width: 100%;
+    }
+  }
+}
+
 @include new-style-dropdown('.breadcrumbs-list .dropdown ');
 @include new-style-dropdown('.js-namespace-select + ');
 
 header.navbar-gitlab-new .header-content .dropdown-menu.projects-dropdown-menu {
   padding: 0;
-
-  @media (max-width: $screen-xs-max) {
-    display: table;
-    left: -50px;
-    min-width: 300px;
-  }
 }
 
 .projects-dropdown-container {

app/views/layouts/nav/_dashboard.html.haml

 %ul.list-unstyled.navbar-sub-nav
-  = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown" }) do
+  = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects" }) do
     %a{ href: "#", data: { toggle: "dropdown" } }
       Projects
       = custom_icon('caret_down')
@@ -22,7 +22,7 @@
     = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: 'Snippets' do
       Snippets
 
-  %li.dropdown.hidden-lg
+  %li.header-more.dropdown.hidden-lg
     %a{ href: "#", data: { toggle: "dropdown" } }
       More
       = custom_icon('caret_down')