[#29014] Create issue form buttons are misaligned on mobile

- Ensure Save/Create button is aligned with Cancel
- Move the cancel button above but float to the right using pull-right
- Allows responsive css to flow

2 files changed, 18 insertions, 13 deletions

diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index cb92b2e97a7..70470c83c51 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -62,24 +62,25 @@
 
 - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
 .row-content-block{ class: (is_footer ? "footer-block" : "middle-block") }
-  - if issuable.new_record?
-    = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-create'
-  - else
-    = form.submit 'Save changes', class: 'btn btn-save'
+  .pull-right
+    - if issuable.new_record?
+      = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class]), class: 'btn btn-cancel'
+    - else
+      - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
+        = link_to 'Delete', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), data: { confirm: "#{issuable.human_class_name} will be removed! Are you sure?" }, method: :delete, class: 'btn btn-danger btn-grouped'
+      = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), class: 'btn btn-grouped btn-cancel'
+
+  %span.append-right-10
+    - if issuable.new_record?
+      = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-create'
+    - else
+      = form.submit 'Save changes', class: 'btn btn-save'
 
   - if !issuable.persisted? && !issuable.project.empty_repo? && (guide_url = contribution_guide_path(issuable.project))
-    .inline.prepend-left-10
+    .inline.prepend-top-10
       Please review the
       %strong= link_to('contribution guidelines', guide_url)
       for this project.
 
-  - if issuable.new_record?
-    = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class]), class: 'btn btn-cancel'
-  - else
-    .pull-right
-      - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
-        = link_to 'Delete', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), data: { confirm: "#{issuable.human_class_name} will be removed! Are you sure?" },
-                                                                                                  method: :delete, class: 'btn btn-danger btn-grouped'
-      = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), class: 'btn btn-grouped btn-cancel'
 
 = form.hidden_field :lock_version
diff --git a/changelogs/unreleased/29014-create-issue-form-buttons-misaligned-on-mobile.yml b/changelogs/unreleased/29014-create-issue-form-buttons-misaligned-on-mobile.yml
new file mode 100644
index 00000000000..f869249c22b
--- /dev/null
+++ b/changelogs/unreleased/29014-create-issue-form-buttons-misaligned-on-mobile.yml
@@ -0,0 +1,4 @@
+---
+title: Fix create issue form buttons are misaligned on mobile
+merge_request: 9706
+author: TM Lee