From fbd2b727cbf8d24685a903e4c73ab66e0cde3fcc Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 12:32:12 -0400
Subject: [PATCH] fix: Only post title should be inside h5, not the additional
 metadata icons

---
 src/shared/components/post/post-listing.tsx | 152 ++++++++++----------
 1 file changed, 72 insertions(+), 80 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 0e2ab8a0..1120de1c 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -519,90 +519,82 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     return (
       <div className="post-title overflow-hidden">
-        <h5>
-          {url ? (
-            this.props.showBody ? (
-              <a
-                className={`d-inline-block ${
-                  !post.featured_community && !post.featured_local
-                    ? "text-body"
-                    : "text-primary"
-                }`}
-                href={url}
-                title={url}
-                rel={relTags}
-              >
-                <div
-                  className="d-inline-block"
-                  dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
-                />
-              </a>
-            ) : (
-              this.postLink
-            )
+        <h5 className="d-inline">
+          {url && this.props.showBody ? (
+            <a
+              className={
+                !post.featured_community && !post.featured_local
+                  ? "text-body"
+                  : "text-primary"
+              }
+              href={url}
+              title={url}
+              rel={relTags}
+              dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
+            ></a>
           ) : (
             this.postLink
           )}
-          {(url && isImage(url)) ||
-            (post.thumbnail_url && (
-              <button
-                className="btn btn-link text-monospace text-muted small d-inline-block"
-                data-tippy-content={i18n.t("expand_here")}
-                onClick={linkEvent(this, this.handleImageExpandClick)}
-              >
-                <Icon
-                  icon={
-                    !this.state.imageExpanded ? "plus-square" : "minus-square"
-                  }
-                  classes="icon-inline"
-                />
-              </button>
-            ))}
-          {post.removed && (
-            <small className="ml-2 text-muted font-italic">
-              {i18n.t("removed")}
-            </small>
-          )}
-          {post.deleted && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("deleted")}
-            >
-              <Icon icon="trash" classes="icon-inline text-danger" />
-            </small>
-          )}
-          {post.locked && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("locked")}
-            >
-              <Icon icon="lock" classes="icon-inline text-danger" />
-            </small>
-          )}
-          {post.featured_community && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              aria-label={i18n.t("featured_in_community")}
-              data-tippy-content={i18n.t("featured_in_community")}
-            >
-              <Icon icon="pin" classes="icon-inline text-primary" />
-            </small>
-          )}
-          {post.featured_local && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              aria-label={i18n.t("featured_in_local")}
-              data-tippy-content={i18n.t("featured_in_local")}
-            >
-              <Icon icon="pin" classes="icon-inline text-secondary" />
-            </small>
-          )}
-          {post.nsfw && (
-            <small className="ml-2 text-muted font-italic">
-              {i18n.t("nsfw")}
-            </small>
-          )}
         </h5>
+        {(url && isImage(url)) ||
+          (post.thumbnail_url && (
+            <button
+              className="btn btn-link text-monospace text-muted small d-inline-block"
+              data-tippy-content={i18n.t("expand_here")}
+              onClick={linkEvent(this, this.handleImageExpandClick)}
+            >
+              <Icon
+                icon={
+                  !this.state.imageExpanded ? "plus-square" : "minus-square"
+                }
+                classes="icon-inline"
+              />
+            </button>
+          ))}
+        {post.removed && (
+          <small className="ml-2 text-muted font-italic">
+            {i18n.t("removed")}
+          </small>
+        )}
+        {post.deleted && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("deleted")}
+          >
+            <Icon icon="trash" classes="icon-inline text-danger" />
+          </small>
+        )}
+        {post.locked && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("locked")}
+          >
+            <Icon icon="lock" classes="icon-inline text-danger" />
+          </small>
+        )}
+        {post.featured_community && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("featured_in_community")}
+            aria-label={i18n.t("featured_in_community")}
+          >
+            <Icon icon="pin" classes="icon-inline text-primary" />
+          </small>
+        )}
+        {post.featured_local && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("featured_in_local")}
+            aria-label={i18n.t("featured_in_local")}
+          >
+            <Icon icon="pin" classes="icon-inline text-secondary" />
+          </small>
+        )}
+        {post.nsfw && (
+          <small className="ml-2 text-muted font-italic">
+            {i18n.t("nsfw")}
+          </small>
+        )}
       </div>
     );
   }