From 91c215f9a7c5f1bd33eee4d8587bc80a92863071 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 31 Aug 2016 20:58:58 -0500
Subject: [PATCH 1/3] make projects dropdown accessible

---
 app/assets/stylesheets/framework/header.scss | 4 ++++
 app/helpers/projects_helper.rb               | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 2b4fc0fb068..e981de241ce 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -160,11 +160,15 @@ header {
       }
 
       .dropdown-toggle-caret {
+        color: $gl-text-color;
+        border: transparent;
+        background: transparent;
         position: relative;
         top: -2px;
         width: 12px;
         line-height: 12px;
         margin-left: 5px;
+        padding: 0;
         font-size: 10px;
         text-align: center;
         cursor: pointer;
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index f07077bd133..7a90a0bb465 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -61,7 +61,9 @@ module ProjectsHelper
     project_link = link_to simple_sanitize(project.name), project_path(project), { class: "project-item-select-holder" }
 
     if current_user
-      project_link << icon("chevron-down", class: "dropdown-toggle-caret js-projects-dropdown-toggle", aria: { label: "Toggle switch project dropdown" }, data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" })
+      project_link << button_tag(type: 'button', class: "dropdown-toggle-caret js-projects-dropdown-toggle", aria: { label: "Toggle switch project dropdown" }, data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" }) do
+        icon("chevron-down")
+      end
     end
 
     full_title = "#{namespace_link} / #{project_link}".html_safe

From 523002e40f79ad85ffa6ce74b8ff405c17429cb6 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 31 Aug 2016 21:16:04 -0500
Subject: [PATCH 2/3] prevent project dropdown chevron from disappearing in
 small viewports

---
 CHANGELOG                                    |  1 +
 app/assets/stylesheets/framework/header.scss | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 9837b2edb9d..78c430a60af 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -31,6 +31,7 @@ v 8.12.0 (unreleased)
   - Add horizontal scrolling to all sub-navs on mobile viewports (ClemMakesApps)
   - Fix markdown help references (ClemMakesApps)
   - Add last commit time to repo view (ClemMakesApps)
+  - Fix accessibility and visibility of project list dropdown button !6140
   - Added project specific enable/disable setting for LFS !5997
   - Don't expose a user's token in the `/api/v3/user` API (!6047)
   - Remove redundant js-timeago-pending from user activity log (ClemMakesApps)
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index e981de241ce..d3e787937e6 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -136,6 +136,8 @@ header {
     }
 
     .title {
+      position: relative;
+      padding-right: 20px;
       margin: 0;
       font-size: 19px;
       max-width: 400px;
@@ -163,11 +165,11 @@ header {
         color: $gl-text-color;
         border: transparent;
         background: transparent;
-        position: relative;
-        top: -2px;
+        position: absolute;
+        right: 3px;
         width: 12px;
-        line-height: 12px;
-        margin-left: 5px;
+        line-height: 19px;
+        margin-top: (($header-height - 19) / 2);
         padding: 0;
         font-size: 10px;
         text-align: center;

From cf1174c673ce4244236b64f25e34f1a609552ede Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 31 Aug 2016 22:55:56 -0500
Subject: [PATCH 3/3] add extra viewport breakpoint for project name width

---
 app/assets/stylesheets/framework/header.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index d3e787937e6..1036219172e 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -150,7 +150,11 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
-      @media (max-width: $screen-sm-max) {
+      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+        max-width: 300px;
+      }
+
+      @media (max-width: $screen-xs-max) {
         max-width: 190px;
       }