Use a <ul> tag for a list of comments

We were using a <ul> tag for a single comment, where the first element
of the list was the comment itself and the second element was the list
of replies.

IMHO it makes more sense to have a list of all comments, where every
element is a comment and inside it there's a list of replies.

We're also rendering the list even if it has no children so it's easier
to add comments through JavaScript. Then we use the :empty CSS selector
to hide the list if it's empty. However, since ERB adds whitespace if we
structure our code the usual way and current browsers don't recognize
elements with whitespace as empty, we have to use the `tag` helper so no
whitespace is added.

spec/system/comments/legislation_annotations_spec.rb

@@ -22,25 +22,25 @@ describe "Commenting legislation questions" do
   end
 
   scenario "Show" do
-    parent_comment = create(:comment, commentable: legislation_annotation)
-    first_child    = create(:comment, commentable: legislation_annotation, parent: parent_comment)
-    second_child   = create(:comment, commentable: legislation_annotation, parent: parent_comment)
     href           = legislation_process_draft_version_annotation_path(legislation_annotation.draft_version.process,
                                                                        legislation_annotation.draft_version,
                                                                        legislation_annotation)
+    parent_comment = create(:comment, commentable: legislation_annotation, body: "Parent")
+    create(:comment, commentable: legislation_annotation, parent: parent_comment, body: "First subcomment")
+    create(:comment, commentable: legislation_annotation, parent: parent_comment, body: "Last subcomment")
 
     visit comment_path(parent_comment)
 
     expect(page).to have_css(".comment", count: 3)
-    expect(page).to have_content parent_comment.body
-    expect(page).to have_content first_child.body
-    expect(page).to have_content second_child.body
+    expect(page).to have_content "Parent"
+    expect(page).to have_content "First subcomment"
+    expect(page).to have_content "Last subcomment"
 
     expect(page).to have_link "Go back to #{legislation_annotation.title}", href: href
 
-    expect(page).to have_selector("ul#comment_#{parent_comment.id}>li", count: 2)
-    expect(page).to have_selector("ul#comment_#{first_child.id}>li", count: 1)
-    expect(page).to have_selector("ul#comment_#{second_child.id}>li", count: 1)
+    within ".comment", text: "Parent" do
+      expect(page).to have_selector(".comment", count: 2)
+    end
   end
 
   scenario "Link to comment show" do