From cc25e2ba1daa4f413e73658a7d960cbf5ba93344 Mon Sep 17 00:00:00 2001
From: Takuya Noguchi <tak.noguchi.iridge@gmail.com>
Date: Fri, 28 Jul 2017 09:25:19 +0000
Subject: [PATCH] Global nav (9.0) UI improvement

---
 app/assets/stylesheets/framework/dropdowns.scss      | 12 +++++-------
 app/assets/stylesheets/framework/filters.scss        |  3 ++-
 app/assets/stylesheets/pages/projects.scss           |  1 +
 .../34921-global-dropdown-ui-improvement.yml         |  4 ++++
 4 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 changelogs/unreleased/34921-global-dropdown-ui-improvement.yml

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 5e410cbf563..3f934403147 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -148,7 +148,6 @@
   padding: 5px 8px;
   color: $gl-text-color;
   line-height: initial;
-  text-overflow: ellipsis;
   border-radius: 2px;
   white-space: nowrap;
   overflow: hidden;
@@ -203,11 +202,6 @@
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
-  @media (max-width: $screen-sm-min) {
-    width: 100%;
-    min-width: 180px;
-  }
-
   &.dropdown-open-left {
     right: 0;
     left: auto;
@@ -289,6 +283,11 @@
     padding: 5px 8px;
     color: $gl-text-color-secondary;
   }
+
+  .badge + span:not(.badge) {
+    // Expects up to 3 digits on the badge
+    margin-right: 40px;
+  }
 }
 
 .droplab-dropdown {
@@ -373,7 +372,6 @@
   .dropdown-menu,
   .dropdown-menu-nav {
     max-width: 280px;
-    width: auto;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 41184907abb..ab2abaca33a 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -393,7 +393,8 @@
 @media (max-width: $screen-xs) {
   .filter-dropdown-container {
     .dropdown-toggle,
-    .dropdown {
+    .dropdown,
+    .dropdown-menu {
       width: 100%;
     }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a3e07a36c33..b3a90dff89a 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -707,6 +707,7 @@ pre.light-well {
   background-color: transparent;
   border: 0;
   text-align: left;
+  text-overflow: ellipsis;
 }
 
 .protected-branches-list,
diff --git a/changelogs/unreleased/34921-global-dropdown-ui-improvement.yml b/changelogs/unreleased/34921-global-dropdown-ui-improvement.yml
new file mode 100644
index 00000000000..6a17353ba3f
--- /dev/null
+++ b/changelogs/unreleased/34921-global-dropdown-ui-improvement.yml
@@ -0,0 +1,4 @@
+---
+title: Improve CSS for global nav dropdown UI
+merge_request: 12772
+author: Takuya Noguchi
-- 
GitLab