Merge branch '27610-issue-number-alignment' into 'master'

fix alignment for long title

Closes #27610

See merge request !9020

6 files changed, 139 insertions, 115 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 9174976c4c6..1a53730bed5 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -461,8 +461,19 @@
 
 .issuable-list {
   li {
+
+    .issue-box {
+      display: -webkit-flex;
+      display: flex;
+    }
+
+    .issue-info-container {
+      -webkit-flex: 1;
+      flex: 1;
+      padding-right: $gl-padding;
+    }
+
     .issue-check {
-      float: left;
       padding-right: $gl-padding;
       margin-bottom: 10px;
       min-width: 15px;
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 8541fe75e8d..692142c5887 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -272,8 +272,15 @@
 
 .mr-list {
   .merge-request {
-    padding: 10px 15px;
+    padding: 10px  0 10px 15px;
     position: relative;
+    display: -webkit-flex;
+    display: flex;
+
+    .issue-info-container {
+      -webkit-flex: 1;
+      flex: 1;
+    }
 
     .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..5c9839cb330 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -1,60 +1,61 @@
 %li{ id: dom_id(issue), class: issue_css_classes(issue), url: issue_path(issue), data: { labels: issue.label_ids, id: issue.id } }
-  - if @bulk_edit
-    .issue-check
-      = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
+  .issue-box
+    - 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
-        %li
-          = icon('thumbs-down')
-          = downvotes
+          - 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
 
-      - 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?}" }
+             
+            = 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
 
-  .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?
-       
-      %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')}
diff --git a/changelogs/unreleased/27610-issue-number-alignment.yml b/changelogs/unreleased/27610-issue-number-alignment.yml
new file mode 100644
index 00000000000..19ab8872c62
--- /dev/null
+++ b/changelogs/unreleased/27610-issue-number-alignment.yml
@@ -0,0 +1,4 @@
+---
+title: fixes issue number alignment problem in MR and issue list
+merge_request: 9020
+author: