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

1 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 2b4fc0fb068..1036219172e 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;
@@ -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;