Merge branch '41570-max-height-dropdown' into 'master'

Resolve "Download menu expands past the fold and doesn't auto size to the bottom height of the browser window" Closes #41570 See merge request gitlab-org/gitlab-ce!16299

Merge branch '41570-max-height-dropdown' into 'master'
4b87aa68 · Phil Hughes · 8de1bb9e · 0d85e1b4 · 4b87aa68 · 4b87aa68
Commit 4b87aa68 authored Jan 09, 2018 by Phil Hughes
5 changed files
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -28,7 +28,9 @@
  .dropdown-menu,
  .dropdown-menu-nav {
    @include set-visible;
-    min-height: 40px;
+    min-height: $dropdown-min-height;
+    max-height: $dropdown-max-height;
+    overflow: auto;

    @media (max-width: $screen-xs-max) {
      width: 100%;

--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -260,7 +260,7 @@
 }

 .filtered-search-input-dropdown-menu {
-  max-height: 260px;
+  max-height: $dropdown-max-height;
  max-width: 280px;
  overflow: auto;


--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -334,7 +334,8 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
 * Dropdowns
 */
 $dropdown-width: 300px;
-$dropdown-max-height: 215px;
+$dropdown-min-height: 40px;
+$dropdown-max-height: 312px;
 $dropdown-vertical-offset: 4px;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -48,7 +48,7 @@
      }

      .dropdown-menu {
-        max-height: 250px;
+        max-height: $dropdown-max-height;
        overflow-y: auto;
      }


--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -322,13 +322,6 @@
  }
 }

-.project-repo-buttons {
-  .project-action-button .dropdown-menu {
-    max-height: 250px;
-    overflow-y: auto;
-  }
-}
-
 .split-one {
  display: inline-table;
  margin-right: 12px;