From 20f9bde88f52ce875be4d0dc4bd5dd346dfe6b84 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Thu, 9 Jul 2020 10:44:05 -0400
Subject: [PATCH] Making comment collapse and lightning buttons not spans.
 Fixes #884

---
 ui/src/components/comment-node.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 839a01dcc..49b566295 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -189,8 +189,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   </Link>
                 </>
               )}
-              <div
-                className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"
+              <button
+                class="btn btn-sm text-muted"
                 onClick={linkEvent(this, this.handleCommentCollapse)}
               >
                 {this.state.collapsed ? (
@@ -202,9 +202,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     <use xlinkHref="#icon-minus-square"></use>
                   </svg>
                 )}
-              </div>
-              <span
-                className={`unselectable pointer ${this.scoreColor}`}
+              </button>
+              {/* This is an expanding spacer for mobile */}
+              <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
+              <button
+                className={`btn btn-sm p-0 unselectable pointer ${this.scoreColor}`}
                 onClick={linkEvent(node, this.handleCommentUpvote)}
                 data-tippy-content={this.pointsTippy}
               >
@@ -212,7 +214,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   <use xlinkHref="#icon-zap"></use>
                 </svg>
                 <span class="mr-1">{this.state.score}</span>
-              </span>
+              </button>
               <span className="mr-1">•</span>
               <span>
                 <MomentTime data={node.comment} />