Merge branch 'stylistic-changes-to-commit-title-bar' into 'master'

Added various stylistic changes to commit title area

## What does this MR do?

After https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6994 was merged, there were some things left over.

## Are there points in the code the reviewer needs to double check?
Yes, in general the code.

Apart from that I couldn't get the extended commit sha to lign up correctly on smaller screens

## Why was this MR needed?
Some things weren't done yet.

- Commit description and commit sha are now bold like in the original design, and are also both visible on smaller screens
- You can now extend the commit sha on bigger screens and keep it visible truncated on smaller screens.
- options dropdown button now correctly displays on smaller screens (similar to issue/mr view)

## Screenshots (if relevant)
Before:
![image](https://gitlab.com/gitlab-org/gitlab-ce/uploads/716cb902bd20dedc705a8f81f6536736/Screen_Shot_2016-10-19_at_10.20.01_AM.png)

After:
![image](/uploads/2329c9e2c731f0fc850b4864fb216756/image.png)
![image](/uploads/d8afde519fe276c0bce2286e56ea463b/image.png)

not aligned correctly:
![image](/uploads/9006df59a1de3875b2317f14d3d20872/image.png)


## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG.md) entry 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?
!6994

See merge request !7213

1 files changed, 36 insertions, 14 deletions

diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index 8ecf7fcb96d..47d3e72679b 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -36,9 +36,42 @@
     padding: 10px 0;
     margin-bottom: 0;
 
-    .commit-options-dropdown-caret {
-      @media (max-width: $screen-sm) {
-        margin-left: 0;
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      align-items: center;
+
+      .commit-meta {
+        flex: 1;
+      }
+    }
+
+    .commit-hash-full {
+      @media (max-width: $screen-sm-max) {
+        width: 80px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+
+    .commit-action-buttons {
+      i {
+        color: $gl-icon-color;
+        font-size: 13px;
+        margin-right: 3px;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        .dropdown {
+          width: 100%;
+          margin-top: 10px;
+        }
+
+        .dropdown-toggle {
+          width: 100%;
+        }
       }
     }
   }
@@ -188,17 +221,6 @@
   }
 }
 
-.commit-action-buttons {
-  position: relative;
-  top: -1px;
-
-  i {
-    color: $gl-icon-color;
-    font-size: 13px;
-    margin-right: 3px;
-  }
-}
-
 /*
  * Commit message textarea for web editor and
  * custom merge request message