From 95ede02c798e647884e7b6c1f8c2a91e9c1c13fb Mon Sep 17 00:00:00 2001
From: Takuya Noguchi <takninnovationresearch@gmail.com>
Date: Thu, 24 Jan 2019 03:17:09 +0900
Subject: [PATCH] Fix CSS grid on a new Project/Group Milestone

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>
---
 app/views/groups/milestones/_form.html.haml        | 14 +++++++-------
 app/views/projects/milestones/_form.html.haml      |  6 ++++--
 app/views/shared/milestones/_form_dates.html.haml  |  6 ++++--
 ...-poor-ui-on-milestone-validation-error-page.yml |  5 +++++
 4 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 changelogs/unreleased/56764-poor-ui-on-milestone-validation-error-page.yml

diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
index b3d13a2dc43..b0ba846f204 100644
--- a/app/views/groups/milestones/_form.html.haml
+++ b/app/views/groups/milestones/_form.html.haml
@@ -1,20 +1,20 @@
 = form_for [@group, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f|
+  = form_errors(@milestone)
   .row
-    = form_errors(@milestone)
-
     .col-md-6
       .form-group.row
-        = f.label :title, "Title", class: "col-form-label col-sm-2"
+        .col-form-label.col-sm-2
+          = f.label :title, "Title"
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true
       .form-group.row.milestone-description
-        = f.label :description, "Description", class: "col-form-label col-sm-2"
+        .col-form-label.col-sm-2
+          = f.label :description, "Description"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { url: group_preview_markdown_path } do
             = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...', supports_autocomplete: false
-            .clearfix
-            .error-alert
-
+          .clearfix
+          .error-alert
     = render "shared/milestones/form_dates", f: f
 
   .form-actions
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 4779b5c434e..19f5bba75c4 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -5,11 +5,13 @@
   .row
     .col-md-6
       .form-group.row
-        = f.label :title, _('Title'), class: 'col-form-label col-sm-2'
+        .col-form-label.col-sm-2
+          = f.label :title, _('Title')
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: 'qa-milestone-title form-control', required: true, autofocus: true
       .form-group.row.milestone-description
-        = f.label :description, _('Description'), class: 'col-form-label col-sm-2'
+        .col-form-label.col-sm-2
+          = f.label :description, _('Description')
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project) } do
             = render 'projects/zen', f: f, attr: :description, classes: 'qa-milestone-description note-textarea', placeholder: _('Write milestone description...')
diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml
index 922805958a5..4de89d7c7a0 100644
--- a/app/views/shared/milestones/_form_dates.html.haml
+++ b/app/views/shared/milestones/_form_dates.html.haml
@@ -1,11 +1,13 @@
 .col-md-6
   .form-group.row
-    = f.label :start_date, "Start Date", class: "col-form-label col-sm-2"
+    .col-form-label.col-sm-2
+      = f.label :start_date, "Start Date"
     .col-sm-10
       = f.text_field :start_date, class: "datepicker form-control", placeholder: "Select start date", autocomplete: 'off'
       %a.inline.float-right.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date
   .form-group.row
-    = f.label :due_date, "Due Date", class: "col-form-label col-sm-2"
+    .col-form-label.col-sm-2
+      = f.label :due_date, "Due Date"
     .col-sm-10
       = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date", autocomplete: 'off'
       %a.inline.float-right.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
diff --git a/changelogs/unreleased/56764-poor-ui-on-milestone-validation-error-page.yml b/changelogs/unreleased/56764-poor-ui-on-milestone-validation-error-page.yml
new file mode 100644
index 00000000000..089ffd47321
--- /dev/null
+++ b/changelogs/unreleased/56764-poor-ui-on-milestone-validation-error-page.yml
@@ -0,0 +1,5 @@
+---
+title: Fix CSS grid on a new Project/Group Milestone
+merge_request: 24614
+author: Takuya Noguchi
+type: fixed