Merge branch '21506-fix-title-dropdown-chevron' into 'master'

Resolve "Inconsistency: Repo Title "down caret" cropped on smaller viewports"

## What does this MR do?

Fixes an issue where the dropdown chevron for a project list was not visible on smaller viewports.

This MR also changes the dropdown trigger into a `button` element for better accessibility (it can now be tabbed to like any link).

## Are there points in the code the reviewer needs to double check?

None that I can think of.

## Why was this MR needed?

Better accessibility and support for smaller viewports.

## Screenshots (if relevant)

Dropdown toggle now targetable by pressing tab to select.
![Screen_Shot_2016-08-31_at_9.12.15_PM](/uploads/8b2038a8ae259efd32da2e94a309ce88/Screen_Shot_2016-08-31_at_9.12.15_PM.png)

Chevron no longer hidden when project title length triggers `overflow: ellipsis`.
![Screen_Shot_2016-08-31_at_9.13.38_PM](/uploads/382e76c06e54bc307106a84ec21ab892/Screen_Shot_2016-08-31_at_9.13.38_PM.png)

## Does this MR meet the acceptance criteria?

- [x] CHANGELOG entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #21506

See merge request !6140

CHANGELOG

@@ -34,6 +34,7 @@ v 8.12.0 (unreleased)
   - Use JavaScript tooltips for mentions !5301 (winniehell)
   - 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)

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;
@@ -148,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;
       }
 
@@ -160,11 +166,15 @@ header {
       }
 
       .dropdown-toggle-caret {
-        position: relative;
-        top: -2px;
+        color: $gl-text-color;
+        border: transparent;
+        background: transparent;
+        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;
         cursor: pointer;

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