feat: redesign comments section for better UX/UI

- Redesigned comment cards with improved spacing and typography
- Added vertical line indicator for reply nesting
- Implemented native details/summary toggle for reply forms (replacing JS)
- Styled 'Join the conversation' section to be more distinct from existing comments
- Added solid-pink shadow to Tailwind configuration
- Updated E2E tests to match new UI structure and elements

e2e/test_comments.py

@@ -71,10 +71,10 @@ def test_reply_form_visible_on_approved_comment(page: Page, base_url: str) -> No
     """An approved seeded comment must display a reply form."""
     _go_to_article(page, base_url)
 
-    # The seeded approved comment should be visible
-    expect(page.get_by_text("E2E Approved Commenter")).to_be_visible()
-    # And a Reply button for it
-    expect(page.get_by_role("button", name="Reply")).to_be_visible()
+    # The seeded approved comment should be visible (as author name)
+    expect(page.get_by_text("E2E Approved Commenter", exact=True)).to_be_visible()
+    # And a Reply toggle for it
+    expect(page.locator("summary").filter(has_text="Reply")).to_be_visible()
 
 
 @pytest.mark.e2e
@@ -82,12 +82,20 @@ def test_reply_submission_redirects(page: Page, base_url: str) -> None:
     """Submitting a reply to an approved comment should redirect with commented=1."""
     _go_to_article(page, base_url)
 
-    # The reply form is always visible below the approved seeded comment
-    reply_form = page.locator("form[action]").filter(has=page.get_by_role("button", name="Reply")).first
-    reply_form.locator('input[name="author_name"]').fill("E2E Replier")
-    reply_form.locator('input[name="author_email"]').fill("replier@example.com")
-    reply_form.locator('textarea[name="body"]').fill("This is a test reply.")
-    reply_form.get_by_role("button", name="Reply").click()
+    # Click the Reply toggle (summary element)
+    page.locator("summary").filter(has_text="Reply").first.click()
+
+    # The reply form should now be visible
+    post_reply_btn = page.get_by_test_id("post-reply-btn").first
+    expect(post_reply_btn).to_be_visible()
+
+    # Fill the form fields
+    # Use a locator that finds the container for this reply form (the details element)
+    reply_container = page.locator("details").filter(has=post_reply_btn).first
+    reply_container.locator('input[name="author_name"]').fill("E2E Replier")
+    reply_container.locator('input[name="author_email"]').fill("replier@example.com")
+    reply_container.locator('textarea[name="body"]').fill("This is a test reply.")
+    post_reply_btn.click()
 
     page.wait_for_url(lambda url: "commented=1" in url, timeout=10_000)
     expect(page.get_by_text("Your comment is awaiting moderation")).to_be_visible()