added various changes to commit title area

app/assets/stylesheets/pages/commit.scss

@@ -36,6 +36,42 @@
     padding: 10px 0;
     margin-bottom: 0;
 
+    .commitable-meta {
+      display: inline-block;
+      line-height: 18px;
+    }
+
+    .commit-hash-full {
+      @media (max-width: $screen-md-min) {
+        width: 80px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+
+    .commitable-actions {
+      @media (min-width: $screen-sm) {
+        float: right;
+        padding-top: 0;
+      }
+
+      .dropdown{
+        @media (max-width: $screen-sm) {
+          width: 100%;
+          margin-top: 10px;
+        }
+      }
+
+      .dropdown-toggle {
+        @media (max-width: $screen-sm) {
+          width: 100%;
+        }
+      }
+    }
+
     .commit-options-dropdown-caret {
       @media (max-width: $screen-sm) {
         margin-left: 0;

app/views/projects/commit/_commit_box.html.haml

 .commit-info-row.commit-info-row-header
-  %span.hidden-xs.hidden-sm Commit
-  = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace js-details-short"
-  = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
-    %span.text-expander
-      \...
-  %span.js-details-content.hide
-    = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
-  = clipboard_button(clipboard_text: @commit.id)
-  %span.hidden-xs authored
-  #{time_ago_with_tooltip(@commit.authored_date)}
-  %span by
-  = author_avatar(@commit, size: 24)
-  %strong
-    = commit_author_link(@commit, avatar: true, size: 24)
-  - if @commit.different_committer?
-    %span.light Committed by
+  .commitable-meta
+    %strong Commit
+    %strong.monospace.js-details-short= @commit.short_id
+    = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
+      %span.text-expander
+        \...
+    %span.js-details-content.hide
+      %strong.monospace.commit-hash-full= @commit.id
+    = clipboard_button(clipboard_text: @commit.id)
+    %span.hidden-xs authored
+    #{time_ago_with_tooltip(@commit.authored_date)}
+    %span by
+    = author_avatar(@commit, size: 24)
     %strong
-      = commit_committer_link(@commit, avatar: true, size: 24)
-    #{time_ago_with_tooltip(@commit.committed_date)}
-
-  .pull-right.commit-action-buttons
-    - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
-        = icon('comment')
-        = @notes_count
-    = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-default append-right-10 hidden-xs hidden-sm" do
-      Browse Files
-    .dropdown.inline
-      %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
-        %span.hidden-xs Options
-        = icon('caret-down', class: ".commit-options-dropdown-caret")
-      %ul.dropdown-menu.dropdown-menu-align-right
-        %li.visible-xs-block.visible-sm-block
-          = link_to namespace_project_tree_path(@project.namespace, @project, @commit) do
-            Browse Files
-        - unless @commit.has_been_reverted?(current_user)
+      = commit_author_link(@commit, avatar: true, size: 24)
+    - if @commit.different_committer?
+      %span.light Committed by
+      %strong
+        = commit_committer_link(@commit, avatar: true, size: 24)
+      #{time_ago_with_tooltip(@commit.committed_date)}
+  .commitable-actions
+    .commit-action-buttons
+      - if defined?(@notes_count) && @notes_count > 0
+        %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
+          = icon('comment')
+          = @notes_count
+      = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-default append-right-10 hidden-xs hidden-sm" do
+        Browse Files
+      .dropdown.inline
+        %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
+          %span Options
+          = icon('caret-down', class: ".commit-options-dropdown-caret")
+        %ul.dropdown-menu.dropdown-menu-align-right
+          %li.visible-xs-block.visible-sm-block
+            = link_to namespace_project_tree_path(@project.namespace, @project, @commit) do
+              Browse Files
+          - unless @commit.has_been_reverted?(current_user)
+            %li.clearfix
+              = revert_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
+          %li.clearfix
+            = cherry_pick_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
           %li.clearfix
-            = revert_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
-        %li.clearfix
-          = cherry_pick_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
-        %li.clearfix
-          = link_to "Tag", new_namespace_project_tag_path(@project.namespace, @project, ref: @commit)
-        %li.divider
-        %li.dropdown-header
-          Download
-        - unless @commit.parents.length > 1
-          %li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch)
-        %li= link_to "Plain Diff",    namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
+            = link_to "Tag", new_namespace_project_tag_path(@project.namespace, @project, ref: @commit)
+          %li.divider
+          %li.dropdown-header
+            Download
+          - unless @commit.parents.length > 1
+            %li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch)
+          %li= link_to "Plain Diff",    namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
 
 .commit-box
   %h3.commit-title