improves html structure for comments

app/assets/stylesheets/layout.scss

@@ -1065,10 +1065,6 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   background: #C0392B;
 }
 
-.is-deleted {
-  background: #E7E7E7;
-}
-
 .level-1 {
   background: #1ABC9C;
 }
@@ -1657,20 +1653,12 @@ table {
       }
     }
 
-    .is-deleted {
-      background: #E7E7E7;
-      margin-left: $line-height;
-      padding: $line-height/2;
-    }
-
     .comment-children {
       border-left: 1px dashed $border;
-      margin-left: $line-height;
-      padding-left: $line-height/4;
-
-      @media only screen and (max-width: 40em) {
+      display: inline-block;
       margin-left: rem-calc(16);
-      }
+      padding-left: rem-calc(8);
+      width: 100%;
     }
 
     .comment-info {
@@ -1710,6 +1698,11 @@ table {
   }
 }
 
+.comment-form {
+  display: inline-block;
+  width: 100%;
+}
+
 // 16. Flags
 // ---------
 

app/views/comments/_comment.html.erb

@@ -1,10 +1,9 @@
 <% cache [locale_and_user_status(comment), comment, commentable_cache_key(comment.commentable), comment.author, (@comment_flags[comment.id] if @comment_flags)] do %>
-  <div class="row">
-  	<ul id="<%= dom_id(comment) %>" class="comment no-bullet small-12 column">
+	<ul id="<%= dom_id(comment) %>" class="comment no-bullet small-12">
     <li class="comment-body">
       <% if comment.hidden? || comment.user.hidden? %>
         <% if comment.children.size > 0 %>
-            <div class="is-deleted">
+          <div class="callout secondary">
             <p><%= t("comments.comment.deleted") %></p>
           </div>
         <% end %>
@@ -96,10 +95,11 @@
     <li>
       <ul id="<%= dom_id(comment) %>_children" class="no-bullet comment-children">
         <% child_comments_of(comment).each do |child| %>
+          <li>
             <%= render 'comments/comment', comment: child %>
+          </li>
         <% end %>
       </ul>
     </li>
   </ul>
-  </div>
 <% end %>

app/views/comments/_form.html.erb

@@ -1,6 +1,6 @@
 <% cache [locale_and_user_status, parent_id, commentable_cache_key(commentable)] do %>
   <% css_id = parent_or_commentable_dom_id(parent_id, commentable) %>
-  <div id="js-comment-form-<%= css_id %>" <%= "style='display:none'".html_safe if toggeable %>>
+  <div id="js-comment-form-<%= css_id %>" <%= "style='display:none'".html_safe if toggeable %> class="comment-form">
     <%= form_for Comment.new, remote: true do |f| %>
       <%= label_tag "comment-body-#{css_id}", t("comments.form.leave_comment") %>
       <%= f.text_area :body, id: "comment-body-#{css_id}", maxlength: Comment.body_max_length, label: false %>