Global nav (9.0) UI improvement

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

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

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,

changelogs/unreleased/34921-global-dropdown-ui-improvement.yml

+---
+title: Improve CSS for global nav dropdown UI
+merge_request: 12772
+author: Takuya Noguchi