From: Florian Heft <flo@fam-heft.de>
Date: Mon, 12 Jun 2023 08:30:37 +0000 (+0200)
Subject: Fixed unclickable button paddings
X-Git-Url: http://these/git/%7BpictshareAvatarThumbnail%28admin.avatar%29%7D?a=commitdiff_plain;h=170949f34f4ae55e7c6a8b84f262d3e67e42f71f;p=lemmy-ui.git

Fixed unclickable button paddings

* Remove the wrapping <button> element that
  visually seems clickable but has no click
  handling (only its child link can be
  clicked)
* fixes #1193
---

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index e6efcef..f80cc8b 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -436,15 +436,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         <>
                           {!this.myComment && (
                             <>
-                              <button className="btn btn-link btn-animate">
-                                <Link
-                                  className="text-muted"
-                                  to={`/create_private_message/${cv.creator.id}`}
-                                  title={i18n.t("message").toLowerCase()}
-                                >
-                                  <Icon icon="mail" />
-                                </Link>
-                              </button>
+                              <Link
+                                className="btn btn-link btn-animate text-muted"
+                                to={`/create_private_message/${cv.creator.id}`}
+                                title={i18n.t("message").toLowerCase()}
+                              >
+                                <Icon icon="mail" />
+                              </Link>
                               <button
                                 className="btn btn-link btn-animate text-muted"
                                 onClick={linkEvent(
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 5ba5313..5a27194 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -649,29 +649,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get commentsButton() {
     const post_view = this.props.post_view;
     return (
-      <button className="btn btn-link text-muted py-0 pl-0">
-        <Link
-          className="text-muted"
-          title={i18n.t("number_of_comments", {
+      <Link
+        className="btn btn-link text-muted py-0 pl-0 text-muted"
+        title={i18n.t("number_of_comments", {
+          count: Number(post_view.counts.comments),
+          formattedCount: Number(post_view.counts.comments),
+        })}
+        to={`/post/${post_view.post.id}?scrollToComments=true`}
+      >
+        <Icon icon="message-square" classes="mr-1" inline />
+        <span className="mr-2">
+          {i18n.t("number_of_comments", {
             count: Number(post_view.counts.comments),
-            formattedCount: Number(post_view.counts.comments),
+            formattedCount: numToSI(post_view.counts.comments),
           })}
-          to={`/post/${post_view.post.id}?scrollToComments=true`}
-        >
-          <Icon icon="message-square" classes="mr-1" inline />
-          <span className="mr-2">
-            {i18n.t("number_of_comments", {
-              count: Number(post_view.counts.comments),
-              formattedCount: numToSI(post_view.counts.comments),
-            })}
+        </span>
+        {this.unreadCount && (
+          <span className="small text-warning">
+            ({this.unreadCount} {i18n.t("new")})
           </span>
-          {this.unreadCount && (
-            <span className="small text-warning">
-              ({this.unreadCount} {i18n.t("new")})
-            </span>
-          )}
-        </Link>
-      </button>
+        )}
+      </Link>
     );
   }