From 1a9c1677d3a06032f360e21ae2ab58cebc5128c6 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Thu, 5 Mar 2020 10:02:23 -0500
Subject: [PATCH] Adding hr separator for top level comment groups on mobile.

---
 ui/src/components/comment-node.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 9b476c7eb..19c834237 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -122,6 +122,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           node.comment.parent_id && !this.props.noIndent ? 'ml-2' : ''
         }`}
       >
+        {!node.comment.parent_id && !this.props.noIndent && (
+          <hr class="d-sm-none my-2" />
+        )}
         <div
           id={`comment-${node.comment.id}`}
           className={`details comment-node mb-1 ${
@@ -130,7 +133,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           style={
             !this.props.noIndent &&
             this.props.node.comment.parent_id &&
-            `border-left: 1px solid; border-color: ${this.state.borderColor} !important`
+            `border-left: 1px ${this.state.borderColor} solid !important`
           }
         >
           <div
@@ -697,6 +700,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             )}
           </div>
         </div>
+        {/* end of details */}
         {this.state.showRemoveDialog && (
           <form
             class="form-inline"