Making comment collapse and lightning buttons not spans. Fixes #884

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 839a01dcc41540aa364f2a548830c4e9402fe4ae..49b56629525f61d8ac5651fbcd8e613d1373980a 100644 (file)
--- 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} />