fix alignment for long title

5 files changed, 125 insertions, 109 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 9174976c4c6..e1ef9228cbe 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -461,6 +461,15 @@
 
 .issuable-list {
   li {
+    .issue-info-container {
+      display: inline-block;
+      width: 96.5%;
+
+      @media (max-width: $screen-md-max) {
+        width: 95%;
+      }
+    }
+
     .issue-check {
       float: left;
       padding-right: $gl-padding;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 1e605337f09..80b0c9493d8 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -1,6 +1,6 @@
 .issues-list {
   .issue {
-    padding: 10px $gl-padding;
+    padding: 10px 0 10px $gl-padding;
     position: relative;
 
     .title {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index b01d8d695d6..86b4f84044c 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -266,9 +266,15 @@
 
 .mr-list {
   .merge-request {
-    padding: 10px 15px;
+    padding: 10px  0 10px 15px;
     position: relative;
 
+    .issue-info-container {
+      @media (max-width: $screen-xs-max) {
+        width: 88%;
+      }
+    }
+
     .merge-request-title {
       margin-bottom: 2px;
 
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 085b2fc2814..c41818546f9 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -2,59 +2,59 @@
   - if @bulk_edit
     .issue-check
       = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
+  .issue-info-container
+    .issue-title.title
+      %span.issue-title-text
+        = confidential_icon(issue)
+        = link_to issue.title, issue_path(issue)
+      %ul.controls
+        - if issue.closed?
+          %li
+            CLOSED
 
-  .issue-title.title
-    %span.issue-title-text
-      = confidential_icon(issue)
-      = link_to issue.title, issue_path(issue)
-    %ul.controls
-      - if issue.closed?
-        %li
-          CLOSED
+        - if issue.assignee
+          %li
+            = link_to_member(@project, issue.assignee, name: false, title: "Assigned to :name")
 
-      - if issue.assignee
-        %li
-          = link_to_member(@project, issue.assignee, name: false, title: "Assigned to :name")
+        - upvotes, downvotes = issue.upvotes, issue.downvotes
+        - if upvotes > 0
+          %li
+            = icon('thumbs-up')
+            = upvotes
 
-      - upvotes, downvotes = issue.upvotes, issue.downvotes
-      - if upvotes > 0
-        %li
-          = icon('thumbs-up')
-          = upvotes
+        - if downvotes > 0
+          %li
+            = icon('thumbs-down')
+            = downvotes
 
-      - if downvotes > 0
+        - note_count = issue.notes.user.count
         %li
-          = icon('thumbs-down')
-          = downvotes
+          = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
+            = icon('comments')
+            = note_count
 
-      - note_count = issue.notes.user.count
-      %li
-        = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
-          = icon('comments')
-          = note_count
-
-  .issue-info
-    #{issuable_reference(issue)} ·
-    opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
-    by #{link_to_member(@project, issue.author, avatar: false)}
-    - if issue.milestone
-       
-      = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
-        = icon('clock-o')
-        = issue.milestone.title
-    - if issue.due_date
-      %span{ class: "#{'cred' if issue.overdue?}" }
+    .issue-info
+      #{issuable_reference(issue)} ·
+      opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
+      by #{link_to_member(@project, issue.author, avatar: false)}
+      - if issue.milestone
+         
+        = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
+          = icon('clock-o')
+          = issue.milestone.title
+      - if issue.due_date
+        %span{ class: "#{'cred' if issue.overdue?}" }
+           
+          = icon('calendar')
+          = issue.due_date.to_s(:medium)
+      - if issue.labels.any?
+         
+        - issue.labels.each do |label|
+          = link_to_label(label, subject: issue.project, css_class: 'label-link')
+      - if issue.tasks?
          
-        = icon('calendar')
-        = issue.due_date.to_s(:medium)
-    - if issue.labels.any?
-       
-      - issue.labels.each do |label|
-        = link_to_label(label, subject: issue.project, css_class: 'label-link')
-    - if issue.tasks?
-       
-      %span.task-status
-        = issue.task_status
+        %span.task-status
+          = issue.task_status
 
-    .pull-right.issue-updated-at
-      %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
+      .pull-right.issue-updated-at
+        %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 4dbb97b3228..a5fbe9d6128 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -3,73 +3,74 @@
     .issue-check
       = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue"
 
-  .merge-request-title.title
-    %span.merge-request-title-text
-      = link_to merge_request.title, merge_request_path(merge_request)
-    %ul.controls
-      - if merge_request.merged?
-        %li
-          MERGED
-      - elsif merge_request.closed?
-        %li
-          = icon('ban')
-          CLOSED
+  .issue-info-container
+    .merge-request-title.title
+      %span.merge-request-title-text
+        = link_to merge_request.title, merge_request_path(merge_request)
+      %ul.controls
+        - if merge_request.merged?
+          %li
+            MERGED
+        - elsif merge_request.closed?
+          %li
+            = icon('ban')
+            CLOSED
 
-      - if merge_request.head_pipeline
-        %li
-          = render_pipeline_status(merge_request.head_pipeline)
+        - if merge_request.head_pipeline
+          %li
+            = render_pipeline_status(merge_request.head_pipeline)
 
-      - if merge_request.open? && merge_request.broken?
-        %li
-          = link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do
-            = icon('exclamation-triangle')
+        - if merge_request.open? && merge_request.broken?
+          %li
+            = link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do
+              = icon('exclamation-triangle')
 
-      - if merge_request.assignee
-        %li
-          = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
+        - if merge_request.assignee
+          %li
+            = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
 
-      - upvotes, downvotes = merge_request.upvotes, merge_request.downvotes
-      - if upvotes > 0
-        %li
-          = icon('thumbs-up')
-          = upvotes
+        - upvotes, downvotes = merge_request.upvotes, merge_request.downvotes
+        - if upvotes > 0
+          %li
+            = icon('thumbs-up')
+            = upvotes
 
-      - if downvotes > 0
-        %li
-          = icon('thumbs-down')
-          = downvotes
+        - if downvotes > 0
+          %li
+            = icon('thumbs-down')
+            = downvotes
 
-      - note_count = merge_request.related_notes.user.count
-      %li
-        = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
-          = icon('comments')
-          = note_count
+        - note_count = merge_request.related_notes.user.count
+        %li
+          = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
+            = icon('comments')
+            = note_count
 
-  .merge-request-info
-    #{issuable_reference(merge_request)} ·
-    opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
-    by #{link_to_member(@project, merge_request.author, avatar: false)}
-    - if merge_request.target_project.default_branch != merge_request.target_branch
-       
-      = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
-        = icon('code-fork')
-        = merge_request.target_branch
+    .merge-request-info
+      #{issuable_reference(merge_request)} ·
+      opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
+      by #{link_to_member(@project, merge_request.author, avatar: false)}
+      - if merge_request.target_project.default_branch != merge_request.target_branch
+         
+        = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
+          = icon('code-fork')
+          = merge_request.target_branch
 
-    - if merge_request.milestone
-       
-      = link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do
-        = icon('clock-o')
-        = merge_request.milestone.title
+      - if merge_request.milestone
+         
+        = link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do
+          = icon('clock-o')
+          = merge_request.milestone.title
 
-    - if merge_request.labels.any?
-       
-      - merge_request.labels.each do |label|
-        = link_to_label(label, subject: merge_request.project, type: :merge_request, css_class: 'label-link')
+      - if merge_request.labels.any?
+         
+        - merge_request.labels.each do |label|
+          = link_to_label(label, subject: merge_request.project, type: :merge_request, css_class: 'label-link')
 
-    - if merge_request.tasks?
-       
-      %span.task-status
-        = merge_request.task_status
+      - if merge_request.tasks?
+         
+        %span.task-status
+          = merge_request.task_status
 
-    .pull-right.hidden-xs
-      %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
+      .pull-right.hidden-xs
+        %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}