diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 82532216589d94a513b231f24a0e4fe92d148912..ff06c57f2b5267dc716857b18f2fe80b5553c8ea 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -361,14 +361,12 @@ class @Notes
   showEditForm: (e) ->
     e.preventDefault()
     note = $(this).closest(".note")
-    note.find(".note-body > .note-text").hide()
-    note.find(".note-header").hide()
+    note.addClass "is-editting"
     form = note.find(".note-edit-form")
     isNewForm = form.is(':not(.gfm-form)')
     if isNewForm
       form.addClass('gfm-form')
     form.addClass('current-note-edit-form')
-    form.show()
 
     # Show the attachment delete link
     note.find(".js-note-attachment-delete").show()
@@ -402,11 +400,9 @@ class @Notes
   cancelEdit: (e) ->
     e.preventDefault()
     note = $(this).closest(".note")
-    note.find(".note-body > .note-text").show()
-    note.find(".note-header").show()
+    note.removeClass "is-editting"
     note.find(".current-note-edit-form")
       .removeClass("current-note-edit-form")
-      .hide()
 
   ###
   Called in response to deleting a note of any kind.
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 61783ec46aae8499feb10600dc1818b5b812aea9..daf2651425fa6fc18008b447ac2266f7a8c940b4 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -26,7 +26,7 @@
   display: none;
 }
 
-.new_note, .edit_note {
+.new_note, .note-edit-form {
   .note-form-actions {
     margin-top: $gl-padding;
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index d408853cc80c45467d12c38b4d7d462e481c27b5..4bd2016bdcfe3f714e05fa52e0ef131eb8946489 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -100,6 +100,18 @@ ul.notes {
     display: block;
     position: relative;
 
+    &.is-editting {
+      .note-header,
+      .note-text,
+      .edited-text {
+        display: none;
+      }
+
+      .note-edit-form {
+        display: block;
+      }
+    }
+
     .note-body {
       overflow: auto;
 
diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/projects/notes/_edit_form.html.haml
index 13e624764d9b8b015dae67bf0e69e2e5e8dbec72..2999befffc642be5723a25c3c90e47c1f6211ec3 100644
--- a/app/views/projects/notes/_edit_form.html.haml
+++ b/app/views/projects/notes/_edit_form.html.haml
@@ -5,6 +5,6 @@
       = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text js-task-list-field'
       = render 'projects/notes/hints'
 
-    .note-form-actions
+    .note-form-actions.clearfix
       = f.submit 'Save Comment', class: 'btn btn-nr btn-save btn-grouped js-comment-button'
       = link_to  'Cancel', '#', class: 'btn btn-nr btn-cancel note-edit-cancel'