From a8d057543983d67ddbef2c6ebf541e81a4c3143f Mon Sep 17 00:00:00 2001
From: Cory Zue <cory@coryzue.com>
Date: Thu, 5 Dec 2024 14:52:08 +0200
Subject: [PATCH] tweak styles of show more button

---
 src/CommentSection.module.css | 7 +++++--
 src/CommentSection.tsx        | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/CommentSection.module.css b/src/CommentSection.module.css
index cdb8bce..2cf17a5 100644
--- a/src/CommentSection.module.css
+++ b/src/CommentSection.module.css
@@ -59,10 +59,13 @@
   gap: 0.5rem;
 }
 
-.showMoreButton {
+.container .showMoreButton {
   margin-top: 0.5rem;
   font-size: 0.875rem;
-  color: #3b82f6;
+  text-decoration: underline;
+}
+
+.container .showMoreButton:hover {
   text-decoration: underline;
 }
 
diff --git a/src/CommentSection.tsx b/src/CommentSection.tsx
index 712e63d..4b7923a 100644
--- a/src/CommentSection.tsx
+++ b/src/CommentSection.tsx
@@ -133,9 +133,9 @@ export const CommentSection = ({ uri: propUri, author, onEmpty, commentFilters }
           return <Comment key={reply.post.uri} comment={reply} filters={commentFilters} />;
         })}
         {visibleCount < sortedReplies.length && (
-          <button onClick={showMore} className={styles.showMoreButton}>
+          <a onClick={showMore} className={styles.showMoreButton}>
             Show more comments
-          </button>
+          </a>
         )}
       </div>
     </div>