Merge branch '24070-project-margins' into 'master'

Resolve "Margins look weird in Project page with pinned sidebar in project stats bar"

## What does this MR do?
Fixes the margins of the project buttons in small screens and when the sidebar is pinned.

Both top and left margin were not aligned with the rest of the page.

## Screenshots (if relevant)
![Screen_Shot_2016-11-18_at_16.39.01](/uploads/9213cbbfba5fd4a57716c09d1807d2ea/Screen_Shot_2016-11-18_at_16.39.01.png)
![margins](/uploads/86bfad4fb48e67224e8bc8f9b8e38520/margins.gif)

## Does this MR meet the acceptance criteria?

- [x] [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
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [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 it does - 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 #24070

See merge request !7580

2 files changed, 32 insertions, 2 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index ad46a2a9128..19a7a97ea0d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -145,6 +145,10 @@
   }
 }
 
+.nav > .project-repo-buttons {
+  margin-top: 0;
+}
+
 .project-repo-buttons,
 .group-buttons {
   margin-top: 15px;
@@ -184,6 +188,12 @@
     margin-left: 10px;
   }
 
+  .download-button {
+    @media (max-width: $screen-lg-min) {
+      margin-left: 0;
+    }
+  }
+
   .count-buttons {
     display: inline-block;
     vertical-align: top;
@@ -468,6 +478,20 @@ a.deploy-project-label {
   }
 }
 
+.page-sidebar-pinned {
+  .project-stats .nav > li.right {
+    @media (min-width: $screen-lg-min) {
+      float: none;
+    }
+  }
+
+  .download-button {
+    @media (min-width: $screen-lg-min) {
+      margin-left: 0;
+    }
+  }
+}
+
 .project-stats {
   font-size: 0;
   border-bottom: 1px solid $border-color;
@@ -485,9 +509,11 @@ a.deploy-project-label {
     }
 
     &.right {
-      @media (min-width: $screen-md-min) {
+      vertical-align: top;
+      margin-top: 0;
+
+      @media (min-width: $screen-lg-min) {
         float: right;
-        margin-top: 0;
       }
     }
   }
diff --git a/changelogs/unreleased/24070-project-margins.yml b/changelogs/unreleased/24070-project-margins.yml
new file mode 100644
index 00000000000..cbc2b0269f0
--- /dev/null
+++ b/changelogs/unreleased/24070-project-margins.yml
@@ -0,0 +1,4 @@
+---
+title: Fix Margins look weird in Project page with pinned sidebar in project stats bar
+merge_request: 7580
+author: