From 5170d283f7db4dac387932e3c632cedbc05801c4 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Tue, 21 Aug 2018 12:48:40 -0600
Subject: [PATCH] Adjust styles for comment collapse buttons

Just a few minor style adjustments to simplify the styles and fix some
bad wrapping behavior with the new bulk-collapse/expand buttons.
---
 tildes/scss/modules/_btn.scss        | 18 ------------------
 tildes/scss/modules/_topic.scss      |  6 ++++++
 tildes/tildes/templates/topic.jinja2 |  4 ++--
 3 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss
index 90d901d..7acc525 100644
--- a/tildes/scss/modules/_btn.scss
+++ b/tildes/scss/modules/_btn.scss
@@ -52,10 +52,8 @@
 
   font-weight: normal;
 
-  border-left-width: 0;
   margin-right: 0.4rem;
   @media (min-width: $size-md) {
-    border-left-width: 1px;
     margin-right: 0.2rem;
     min-width: 0.8rem;
   }
@@ -65,22 +63,6 @@
   }
 }
 
-.btn-comment-collapse-all {
-  margin-left: 0.4rem;
-  border-left-width: 1px;
-  @media (min-width: $size-md) {
-    margin-top: 0.35rem;
-  }
-}
-
-.btn-comment-expand-all {
-  margin-left: 0.2rem;
-  border-left-width: 1px;
-  @media (min-width: $size-md) {
-    margin-top: 0.35rem;
-  }
-}
-
 .btn-comment-tag {
   display: inline-flex;
   align-items: center;
diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss
index 82827aa..4e6ac05 100644
--- a/tildes/scss/modules/_topic.scss
+++ b/tildes/scss/modules/_topic.scss
@@ -248,8 +248,14 @@
 .topic-comments {
   header {
     display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    margin-bottom: 0.4rem;
 
     h2 {
+      margin-bottom: 0;
+      margin-right: 0.4rem;
       white-space: nowrap;
     }
 
diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2
index cdd913f..b737087 100644
--- a/tildes/tildes/templates/topic.jinja2
+++ b/tildes/tildes/templates/topic.jinja2
@@ -153,8 +153,8 @@
       {% endtrans %}
       </h2>
 
-      <button class="btn btn-comment-collapse btn-comment-collapse-all" data-js-comment-collapse-all-button title="Collapse child comments">&minus;</button>
-      <button class="btn btn-comment-collapse btn-comment-expand-all" data-js-comment-expand-all-button title="Expand all comments">+</button>
+      <button class="btn btn-comment-collapse" title="Collapse reply comments" data-js-comment-collapse-all-button>&minus;</button>
+      <button class="btn btn-comment-collapse" title="Expand all comments" data-js-comment-expand-all-button>+</button>
 
       <form class="form-listing-options" method="get">
         <div class="form-group">