From 520a60d1bef5087a7a1315fb6718be9556b4bcd0 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Sun, 13 Aug 2017 18:46:35 +0200
Subject: [PATCH 01/14] Use popovers with formatted comments instead of
 tooltips

---
 app/views/request_for_comments/show.html.erb | 27 +++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 6a21ca24..ce6f8d8e 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -153,18 +153,37 @@ also, all settings from the rails model needed for the editor configuration in t
     });
 
     jqrequest.done(function(response){
-      $.each(response, function(index, comment) {
-        comment.className = "code-ocean_comment";
+      var comments = response.slice().sort(function (a, b) {
+          return a.row > b.row;
+      });
+      while (comments.length > 0) {
+        var cluster = [];
+        var clusterRow = comments[0].row;
+        while (comments.length > 0 && comments[0].row === clusterRow) {
+          cluster.push(comments.shift());
+        }
+        var popupContent = '';
+        cluster.forEach(function(comment) {
+          popupContent += '<p><b>' + comment.username + '</b>: ' + comment.text.replace(/\n/g, '<br>') + '<p>';
+        });
+        var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > .ace_gutter-cell:contains("' + (clusterRow + 1) + '")');
+        icon.popover({
+          content: popupContent,
+          html: true,
+          trigger: 'hover',
+          container: 'body'
+        });
+      }
 
+      $.each(response, function(index, comment) {
+        comment.className = 'code-ocean_comment';
         // if we have tabs or carriage returns in the comment, just add the name and leave it as it is. otherwise: format!
         if(comment.text.includes("\n") || comment.text.includes("\t")){
           comment.text = comment.username + ": " + comment.text;
         } else {
           comment.text = comment.username + ": " + stringDivider(comment.text, 80, "\n");
         }
-
       });
-
       session.setAnnotations(response);
     })
   }

From e1c45f025fd294519569fea5b9b33a33d671790a Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Sun, 13 Aug 2017 18:46:55 +0200
Subject: [PATCH 02/14] Hide Ace's tooltips for annotations

---
 app/assets/stylesheets/request-for-comments.css.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index cbaf9d36..87eeba44 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -17,3 +17,7 @@
   width: 100%;
   height: 200px;
 }
+
+.ace_tooltip {
+  display: none !important;
+}

From 0f3db8a644fae7ee39f952dcb10726f5ffd5e454 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Wed, 16 Aug 2017 17:29:08 +0200
Subject: [PATCH 03/14] Remove old comments before refresh to fix event leak

---
 app/views/request_for_comments/show.html.erb | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index ce6f8d8e..3e889ac6 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -140,6 +140,11 @@ also, all settings from the rails model needed for the editor configuration in t
     currentEditor.on("guttermousedown", handleSidebarClick);
   });
 
+  function cleanupPopovers() {
+    // remove all possible popovers
+    $('.editor > .ace_gutter > .ace_gutter-layer > .ace_gutter-cell').popover('destroy');
+  }
+
   function setAnnotations(editor, fileid) {
     var session = editor.getSession();
 
@@ -166,7 +171,7 @@ also, all settings from the rails model needed for the editor configuration in t
         cluster.forEach(function(comment) {
           popupContent += '<p><b>' + comment.username + '</b>: ' + comment.text.replace(/\n/g, '<br>') + '<p>';
         });
-        var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > .ace_gutter-cell:contains("' + (clusterRow + 1) + '")');
+        var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > div:nth-child(' + (clusterRow + 1) + ')');
         icon.popover({
           content: popupContent,
           html: true,
@@ -201,6 +206,7 @@ also, all settings from the rails model needed for the editor configuration in t
   }
 
   function deleteComment(file_id, row, editor) {
+    cleanupPopovers();
     var jqxhr = $.ajax({
       type: 'DELETE',
       url: "/comments",
@@ -215,6 +221,7 @@ also, all settings from the rails model needed for the editor configuration in t
   }
 
   function createComment(file_id, row, editor, commenttext){
+    cleanupPopovers();
     var jqxhr = $.ajax({
       data: {
         comment: {

From 1ffda4f89685419dd4750802214d633a1aa61f53 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Wed, 16 Aug 2017 17:29:26 +0200
Subject: [PATCH 04/14] Fix cluster sorting

---
 app/views/request_for_comments/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 3e889ac6..4907949b 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -159,7 +159,7 @@ also, all settings from the rails model needed for the editor configuration in t
 
     jqrequest.done(function(response){
       var comments = response.slice().sort(function (a, b) {
-          return a.row > b.row;
+          return a.row - b.row;
       });
       while (comments.length > 0) {
         var cluster = [];

From b5c997e8a959eb9623ffff109eadfdbd752cd46a Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Wed, 16 Aug 2017 18:20:56 +0200
Subject: [PATCH 05/14] Preprocess comment text to protect from XSS attacks

---
 app/views/request_for_comments/show.html.erb | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 4907949b..96470d05 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -64,6 +64,8 @@
   </h5>
 </div>
 <hr>
+
+<div class="hidden sanitizer"></div>
 <!--
 do not put a carriage return in the line below. it will be present in the presentation of the source code, otherwise.
 also, all settings from the rails model needed for the editor configuration in the JavaScript are attached to the editor as data attributes here.
@@ -145,6 +147,13 @@ also, all settings from the rails model needed for the editor configuration in t
     $('.editor > .ace_gutter > .ace_gutter-layer > .ace_gutter-cell').popover('destroy');
   }
 
+  function preprocess(commentText) {
+      // sanitize comments to deal with XSS attacks:
+      commentText = $('div.sanitizer').text(commentText).html();
+      // display original line breaks:
+      return commentText.replace(/\n/g, '<br>');
+  }
+
   function setAnnotations(editor, fileid) {
     var session = editor.getSession();
 
@@ -169,7 +178,7 @@ also, all settings from the rails model needed for the editor configuration in t
         }
         var popupContent = '';
         cluster.forEach(function(comment) {
-          popupContent += '<p><b>' + comment.username + '</b>: ' + comment.text.replace(/\n/g, '<br>') + '<p>';
+          popupContent += '<p><b>' + comment.username + '</b>: ' + preprocess(comment.text) + '<p>';
         });
         var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > div:nth-child(' + (clusterRow + 1) + ')');
         icon.popover({

From 03263548470f41f3b84478d9559d59ae03ceb532 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Wed, 16 Aug 2017 18:27:35 +0200
Subject: [PATCH 06/14] Make popover stylable and apply default styling

---
 app/assets/stylesheets/request-for-comments.css.scss | 8 ++++++++
 app/views/request_for_comments/show.html.erb         | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index 87eeba44..6f28a6f0 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -21,3 +21,11 @@
 .ace_tooltip {
   display: none !important;
 }
+
+.popover-username {
+  font-weight: bold;
+}
+
+.popover-comment {
+  word-wrap: break-word;
+}
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 96470d05..7efa26a3 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -178,7 +178,8 @@ also, all settings from the rails model needed for the editor configuration in t
         }
         var popupContent = '';
         cluster.forEach(function(comment) {
-          popupContent += '<p><b>' + comment.username + '</b>: ' + preprocess(comment.text) + '<p>';
+            popupContent += '<p><div class="popover-username">' + comment.username + ':</div>' +
+                '<div class="popover-comment">' + preprocess(comment.text) + '</div><p>';
         });
         var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > div:nth-child(' + (clusterRow + 1) + ')');
         icon.popover({

From 14af5182bf31df9218773985a1c5b54804800087 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Wed, 16 Aug 2017 18:35:30 +0200
Subject: [PATCH 07/14] Sort comments by date (sort of)

---
 app/views/request_for_comments/show.html.erb | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 7efa26a3..52faed62 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -176,6 +176,9 @@ also, all settings from the rails model needed for the editor configuration in t
         while (comments.length > 0 && comments[0].row === clusterRow) {
           cluster.push(comments.shift());
         }
+        cluster = cluster.sort(function (a, b) {
+            return a.id - b.id;
+        });
         var popupContent = '';
         cluster.forEach(function(comment) {
             popupContent += '<p><div class="popover-username">' + comment.username + ':</div>' +

From f30b60657f75fc44863f35b0b2a5a2bb2baf5bba Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 13:56:28 +0200
Subject: [PATCH 08/14] Get more comment information from the server

---
 app/controllers/comments_controller.rb | 2 ++
 app/models/comment.rb                  | 2 +-
 app/views/comments/index.json.jbuilder | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb
index f6e4f7fb..01dcd9d5 100644
--- a/app/controllers/comments_controller.rb
+++ b/app/controllers/comments_controller.rb
@@ -19,6 +19,8 @@ class CommentsController < ApplicationController
       @comments = Comment.where(file_id: params[:file_id])
       @comments.map{|comment|
         comment.username = comment.user.displayname
+        comment.date = comment.created_at.strftime('%d.%m.%Y %k:%M')
+        comment.updated = (comment.created_at != comment.updated_at)
       }
     else
       @comments = []
diff --git a/app/models/comment.rb b/app/models/comment.rb
index ceeb9c36..a5946ac9 100644
--- a/app/models/comment.rb
+++ b/app/models/comment.rb
@@ -1,7 +1,7 @@
 class Comment < ActiveRecord::Base
   # inherit the creation module: encapsulates that this is a polymorphic user, offers some aliases and makes sure that all necessary attributes are set.
   include Creation
-  attr_accessor :username
+  attr_accessor :username, :date, :updated
 
   belongs_to :file, class_name: 'CodeOcean::File'
   belongs_to :user, polymorphic: true
diff --git a/app/views/comments/index.json.jbuilder b/app/views/comments/index.json.jbuilder
index 85172014..55dfac49 100644
--- a/app/views/comments/index.json.jbuilder
+++ b/app/views/comments/index.json.jbuilder
@@ -1,4 +1,4 @@
 json.array!(@comments) do |comment|
-  json.extract! comment, :id, :user_id, :file_id, :row, :column, :text, :username
+  json.extract! comment, :id, :user_id, :file_id, :row, :column, :text, :username, :date, :updated
   json.url comment_url(comment, format: :json)
 end

From 389934920deb654d6e43c9dc0f0da153d9932735 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 13:57:03 +0200
Subject: [PATCH 09/14] Add dividers and comment date to popover

---
 app/views/request_for_comments/show.html.erb | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 52faed62..a9bf7c65 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -180,9 +180,13 @@ also, all settings from the rails model needed for the editor configuration in t
             return a.id - b.id;
         });
         var popupContent = '';
-        cluster.forEach(function(comment) {
+        cluster.forEach(function(comment, index) {
+            if (index !== 0) {
+                popupContent += '<div class="popover-divider"></div>'
+            }
             popupContent += '<p><div class="popover-username">' + comment.username + ':</div>' +
-                '<div class="popover-comment">' + preprocess(comment.text) + '</div><p>';
+                '<div class="popover-comment">' + preprocess(comment.text) + '</div>' +
+                '<div class="popover-date">' + comment.date + '</div><p>';
         });
         var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > div:nth-child(' + (clusterRow + 1) + ')');
         icon.popover({

From ec3464f4ddc6019d7121f3b5c0aa92811e4a5d73 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 13:59:40 +0200
Subject: [PATCH 10/14] Style dividers and date fields

---
 .../stylesheets/request-for-comments.css.scss      | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index 6f28a6f0..c66d0393 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -29,3 +29,17 @@
 .popover-comment {
   word-wrap: break-word;
 }
+
+.popover-date {
+  color: #008cba;
+  margin-top: 10px;
+}
+
+.popover-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #008cba;
+  overflow: hidden;
+  margin-top: -10px;
+  margin-bottom: 10px;
+}

From 45fdbce57d0ac5d76367c34d2212fc910ceb78f4 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 14:13:33 +0200
Subject: [PATCH 11/14] Allow updating comments

---
 app/policies/comment_policy.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/policies/comment_policy.rb b/app/policies/comment_policy.rb
index ef7a0922..549c8438 100644
--- a/app/policies/comment_policy.rb
+++ b/app/policies/comment_policy.rb
@@ -12,7 +12,7 @@ class CommentPolicy < ApplicationPolicy
     everyone
   end
 
-  [:new?, :destroy?].each do |action|
+  [:new?, :destroy?, :update?].each do |action|
     define_method(action) { admin? || author? }
   end
 

From 48227d68f3b5a84350fe3fae53a0d63da17c3bfb Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 14:32:36 +0200
Subject: [PATCH 12/14] Add edited-label to edited comments

---
 .../stylesheets/request-for-comments.css.scss       | 11 ++++++++++-
 app/views/request_for_comments/show.html.erb        | 13 +++++++++++--
 config/locales/de.yml                               |  1 +
 config/locales/en.yml                               |  1 +
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index c66d0393..eb3fbba3 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -30,9 +30,18 @@
   word-wrap: break-word;
 }
 
+.popover-footer {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
 .popover-date {
   color: #008cba;
-  margin-top: 10px;
+}
+
+.popover-updated {
+  font-style: italic;
 }
 
 .popover-divider {
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index a9bf7c65..f3d5ee7a 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -184,9 +184,18 @@ also, all settings from the rails model needed for the editor configuration in t
             if (index !== 0) {
                 popupContent += '<div class="popover-divider"></div>'
             }
-            popupContent += '<p><div class="popover-username">' + comment.username + ':</div>' +
+            popupContent += '<p>';
+            popupContent += '<div class="popover-username">' + comment.username + ':</div>' +
                 '<div class="popover-comment">' + preprocess(comment.text) + '</div>' +
-                '<div class="popover-date">' + comment.date + '</div><p>';
+                '<div class="popover-footer">' +
+                  '<div class="popover-date">' + comment.date + '</div>';
+            if (comment.updated) {
+                popupContent += '<div class="popover-updated">' +
+                    '<i class="fa fa-pencil" aria-hidden="true"></i>' +
+                    '<%= t('request_for_comments.comment_edited') %>' +
+                  '</div>'
+            }
+            popupContent += '</div></p>'
         });
         var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > div:nth-child(' + (clusterRow + 1) + ')');
         icon.popover({
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 021f65a7..090b1823 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -466,6 +466,7 @@ de:
     write_a_thank_you_node: "Wenn Sie möchten, können Sie sich bei allen Mitstudenten, die Ihnen bei der Beantwortung Ihrer Frage geholfen haben, bedanken:"
     send_thank_you_note: "Senden"
     cancel_thank_you_note: "Nichts senden"
+    comment_edited: "bearbeitet"
   sessions:
     create:
       failure: Fehlerhafte E-Mail oder Passwort.
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9a334697..1d7ed507 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -487,6 +487,7 @@ en:
     write_a_thank_you_node: "If you want, you can write a thank you note to all your commenters:"
     send_thank_you_note: "Send"
     cancel_thank_you_note: "Don't send"
+    comment_edited: "edited"
   sessions:
     create:
       failure: Invalid email or password.

From 2c6ab19f365e2c24b57b631c6bfac117b2fd903f Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 14:45:48 +0200
Subject: [PATCH 13/14] Add comments explaining clustering

---
 app/views/request_for_comments/show.html.erb | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index f3d5ee7a..94b388bb 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -167,18 +167,24 @@ also, all settings from the rails model needed for the editor configuration in t
     });
 
     jqrequest.done(function(response){
+      // comments need to be sorted to cluster them per line
       var comments = response.slice().sort(function (a, b) {
           return a.row - b.row;
       });
       while (comments.length > 0) {
+        // new cluster of comments
         var cluster = [];
         var clusterRow = comments[0].row;
+        // now collect all comments on this line
         while (comments.length > 0 && comments[0].row === clusterRow) {
           cluster.push(comments.shift());
         }
+        // sort the comments by creation date
         cluster = cluster.sort(function (a, b) {
             return a.id - b.id;
         });
+
+        // build the markup for the current line's popover
         var popupContent = '';
         cluster.forEach(function(comment, index) {
             if (index !== 0) {
@@ -197,10 +203,14 @@ also, all settings from the rails model needed for the editor configuration in t
             }
             popupContent += '</div></p>'
         });
-        var icon = $('*[data-file-id="' + fileid + '"] > .ace_gutter > .ace_gutter-layer > div:nth-child(' + (clusterRow + 1) + ')');
+
+        // attach the popover to the ace sidebar (where the comment icon is displayed)
+        var icon = $('*[data-file-id="' + fileid + '"]')          // the editor for this file
+                .find('.ace_gutter > .ace_gutter-layer')          // the sidebar
+                .find('div:nth-child(' + (clusterRow + 1) + ')'); // the correct line
         icon.popover({
           content: popupContent,
-          html: true,
+          html: true, // necessary to style comments. XSS is not possible due to comment pre-processing (sanitizing)
           trigger: 'hover',
           container: 'body'
         });

From 74a7deffa2c9c4de5906c831e1485cca6f36c7ad Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 17 Aug 2017 15:44:51 +0200
Subject: [PATCH 14/14] Change date position

---
 .../stylesheets/request-for-comments.css.scss | 40 ++++++++++++-------
 app/views/request_for_comments/show.html.erb  | 15 +++----
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index eb3fbba3..6448e6e7 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -22,26 +22,39 @@
   display: none !important;
 }
 
+p.comment {
+  width: 400px;
+}
+
+.popover-header {
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 10px;
+  margin: auto;
+}
+
 .popover-username {
   font-weight: bold;
+  width: 60%;
+  float: left;
+}
+
+.popover-date {
+  text-align: right;
+  color: #008cba;
+  margin-left: 60%;
+  font-size: x-small;
+}
+
+.popover-updated {
+  text-align: right;
+  margin-left: 60%;
+  font-size: x-small;
 }
 
 .popover-comment {
   word-wrap: break-word;
-}
-
-.popover-footer {
-  margin-top: 10px;
   margin-bottom: 10px;
-  width: 100%;
-}
-
-.popover-date {
-  color: #008cba;
-}
-
-.popover-updated {
-  font-style: italic;
 }
 
 .popover-divider {
@@ -49,6 +62,5 @@
   height: 1px;
   background-color: #008cba;
   overflow: hidden;
-  margin-top: -10px;
   margin-bottom: 10px;
 }
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 94b388bb..ab60ef91 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -190,18 +190,19 @@ also, all settings from the rails model needed for the editor configuration in t
             if (index !== 0) {
                 popupContent += '<div class="popover-divider"></div>'
             }
-            popupContent += '<p>';
-            popupContent += '<div class="popover-username">' + comment.username + ':</div>' +
-                '<div class="popover-comment">' + preprocess(comment.text) + '</div>' +
-                '<div class="popover-footer">' +
-                  '<div class="popover-date">' + comment.date + '</div>';
+            popupContent += '<p class="comment">';
+            popupContent += '<div class="popover-header">' +
+                '<div class="popover-username">' + preprocess(comment.username) + '</div>' +
+                '<div class="popover-date">' + comment.date + '</div>';
             if (comment.updated) {
                 popupContent += '<div class="popover-updated">' +
                     '<i class="fa fa-pencil" aria-hidden="true"></i>' +
                     '<%= t('request_for_comments.comment_edited') %>' +
-                  '</div>'
+                    '</div>'
             }
-            popupContent += '</div></p>'
+            popupContent += '</div>';
+            popupContent += '<div class="popover-comment">' + preprocess(comment.text) + '</div>';
+            popupContent += '</p>';
         });
 
         // attach the popover to the ace sidebar (where the comment icon is displayed)