Merge branch '21778-pinned-nav-header' into 'master'

21778 Correct css styles for pinned navigation

## What does this MR do?
Fixes css for header and comment notes when sidebar is pinned

## Screenshots (if relevant)
Before:
![Screen_Shot_2016-11-08_at_11.02.55_AM](/uploads/ae7bb1f477b2ffbd4d4e0364f2770816/Screen_Shot_2016-11-08_at_11.02.55_AM.png)
After:
![Screen_Shot_2016-11-08_at_11.02.34_AM](/uploads/cf0b9f9f175aa5c6c7e79640b76b1040/Screen_Shot_2016-11-08_at_11.02.34_AM.png)

Before:
![Screen_Shot_2016-11-08_at_11.03.21_AM](/uploads/f48ea742ee6dbb86874e47dd27eddadd/Screen_Shot_2016-11-08_at_11.03.21_AM.png)
After:
![Screen_Shot_2016-11-08_at_11.02.19_AM](/uploads/312b27ba07e04ceb96f8ed9d6f167bee/Screen_Shot_2016-11-08_at_11.02.19_AM.png)
## Does this MR meet the acceptance criteria?

- [ ] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #21778 

cc @mikegreiling

See merge request !7362

3 files changed, 26 insertions, 2 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 7f226b7920d..0e0673a72f6 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -153,7 +153,7 @@ header {
       padding-right: 20px;
       margin: 0;
       font-size: 19px;
-      max-width: 400px;
+      max-width: 385px;
       display: inline-block;
       line-height: $header-height;
       font-weight: normal;
@@ -223,6 +223,14 @@ header {
   }
 }
 
+.page-sidebar-pinned.right-sidebar-expanded {
+  @media (max-width: $screen-lg-min) {
+    .header-content .title {
+      width: 300px;
+    }
+  }
+}
+
 @media (max-width: $screen-xs-max) {
   header .container-fluid {
     font-size: 18px;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index e0d00759c9c..8bf5edfde50 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -252,7 +252,7 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
  */
 $search-input-border-color: rgba(#4688f1, .8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
-$search-input-width: 244px;
+$search-input-width: 220px;
 $location-badge-color: #aaa;
 $location-badge-bg: $gray-normal;
 $location-badge-active-bg: #4f91f8;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 526e9ae5cdd..9bfa1c96a5d 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -141,6 +141,22 @@ ul.notes {
   }
 }
 
+.page-sidebar-pinned.right-sidebar-expanded {
+  @media (max-width: $screen-lg-min) {
+    .note-header {
+      .note-headline-light {
+        display: block;
+      }
+
+      .note-actions {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+}
+
 // Diff code in discussion view
 .discussion-body .diff-file {
   .file-title {