Change date position

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;
 }

app/views/request_for_comments/show.html.erb

@@ -190,10 +190,9 @@ 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">' +
+            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">' +
@@ -201,7 +200,9 @@ also, all settings from the rails model needed for the editor configuration in t
                     '<%= t('request_for_comments.comment_edited') %>' +
                     '</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)