Commit message textareas have 72 char mark line.

7 files changed, 38 insertions, 5 deletions

diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss
index 56cd4db905e..36551f85b6a 100644
--- a/app/assets/stylesheets/generic/forms.scss
+++ b/app/assets/stylesheets/generic/forms.scss
@@ -75,3 +75,26 @@ label {
     width: 200px;
   }
 }
+
+.commit-message-container {
+  background-color: $body-bg;
+  position: relative;
+  font-family: $monospace_font;
+  $left: 12px;
+  .max-width-marker {
+    color: rgba(0, 0, 0, 0.0);
+    font-family: inherit;
+    left: $left;
+    height: 100%;
+    border-right: 1px solid mix($input-border, white);
+    position: absolute;
+    z-index: 1;
+  }
+  > textarea {
+    background-color: rgba(0, 0, 0, 0.0);
+    font-family: inherit;
+    padding-left: $left;
+    position: relative;
+    z-index: 2;
+  }
+}
diff --git a/app/assets/stylesheets/sections/tree.scss b/app/assets/stylesheets/sections/tree.scss
index 55a5819b55a..86e2a51641a 100644
--- a/app/assets/stylesheets/sections/tree.scss
+++ b/app/assets/stylesheets/sections/tree.scss
@@ -151,3 +151,5 @@
     }
   }
 }
+
+#modal-remove-blob > .modal-dialog { width: 850px; }
diff --git a/app/views/projects/blob/_remove.html.haml b/app/views/projects/blob/_remove.html.haml
index 6384703671a..692248dd233 100644
--- a/app/views/projects/blob/_remove.html.haml
+++ b/app/views/projects/blob/_remove.html.haml
@@ -14,7 +14,8 @@
             = label_tag 'commit_message', class: "control-label" do
               Commit message
             .col-sm-10
-              = text_area_tag 'commit_message', params[:commit_message], placeholder: "Removed this file because...", required: true, rows: 3, class: 'form-control'
+              = render 'shared/commit_message_container', {textarea: text_area_tag('commit_message',
+                  params[:commit_message], placeholder: "Removed this file because...", required: true, rows: 3, class: 'form-control')}
           .form-group
             .col-sm-2
             .col-sm-10
diff --git a/app/views/projects/edit_tree/show.html.haml b/app/views/projects/edit_tree/show.html.haml
index 3f2e98f3a7f..41a63493b2b 100644
--- a/app/views/projects/edit_tree/show.html.haml
+++ b/app/views/projects/edit_tree/show.html.haml
@@ -19,7 +19,8 @@
       = label_tag 'commit_message', class: "control-label" do
         Commit message
       .col-sm-10
-        = text_area_tag 'commit_message', '', placeholder: "Update #{@blob.name}", required: true, rows: 3, class: 'form-control'
+        = render 'shared/commit_message_container', {textarea: text_area_tag('commit_message', '',
+            placeholder: "Update #{@blob.name}", required: true, rows: 3, class: 'form-control')}
     .form-actions
       = hidden_field_tag 'last_commit', @last_commit
       = hidden_field_tag 'content', '', id: "file-content"
diff --git a/app/views/projects/merge_requests/show/_mr_accept.html.haml b/app/views/projects/merge_requests/show/_mr_accept.html.haml
index 6594709f2ae..43157481f34 100644
--- a/app/views/projects/merge_requests/show/_mr_accept.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_accept.html.haml
@@ -21,7 +21,6 @@
             = link_to "click here", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
           for instructions.
 
-
         .js-toggle-container
           %p
             If you want to modify merge commit message -
@@ -31,7 +30,8 @@
             .form-group
               = label_tag :merge_commit_message, "Commit message", class: 'control-label'
               .col-sm-10
-                = text_area_tag :merge_commit_message, @merge_request.merge_commit_message, class: "form-control js-gfm-input", rows: 14, required: true
+                = render 'shared/commit_message_container', {textarea: text_area_tag(:merge_commit_message,
+                    @merge_request.merge_commit_message, class: "form-control js-gfm-input", rows: 14, required: true)}
                 %p.hint
                   The recommended maximum line length is 52 characters for the first line and 72 characters for all following lines.
 
diff --git a/app/views/projects/new_tree/show.html.haml b/app/views/projects/new_tree/show.html.haml
index 9d7c7afbeac..9ecbbe7508e 100644
--- a/app/views/projects/new_tree/show.html.haml
+++ b/app/views/projects/new_tree/show.html.haml
@@ -24,7 +24,8 @@
       = label_tag 'commit_message', class: "control-label" do
         Commit message
       .col-sm-10
-        = text_area_tag 'commit_message', params[:commit_message], placeholder: "Added new file", required: true, rows: 3, class: 'form-control'
+        = render 'shared/commit_message_container', {textarea: text_area_tag('commit_message',
+            params[:commit_message], placeholder: "Added new file", required: true, rows: 3, class: 'form-control')}
 
     .file-holder
       .file-title
diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml
new file mode 100644
index 00000000000..cca7a0efc9b
--- /dev/null
+++ b/app/views/shared/_commit_message_container.html.haml
@@ -0,0 +1,5 @@
+.commit-message-container
+  .max-width-marker
+    -# When the `ch` CSS length unit becomes widely supported `http://www.quirksmode.org/css/units-values` remove this workaround.
+    = 'a' * 72
+  = textarea