From 6440ae0b5c15355dd87959412ea609396a198215 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Tue, 9 May 2023 23:37:49 +0200
Subject: [PATCH] Community: Fix position of the "creator heart" (broken by
 #3783)

---
 assets/css/default.css    |  2 ++
 src/invidious/comments.cr | 12 ++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 23649f8f..431a0427 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -46,6 +46,7 @@ body a.channel-owner {
 }
 
 .creator-heart {
+  display: inline-block;
   position: relative;
   width: 16px;
   height: 16px;
@@ -66,6 +67,7 @@ body a.channel-owner {
 }
 
 .creator-heart-small-container {
+  display: block;
   position: relative;
   width: 13px;
   height: 13px;
diff --git a/src/invidious/comments.cr b/src/invidious/comments.cr
index 01556099..466c9fe5 100644
--- a/src/invidious/comments.cr
+++ b/src/invidious/comments.cr
@@ -409,7 +409,6 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
 
       html << <<-END_HTML
         <i class="icon ion-ios-thumbs-up"></i> #{number_with_separator(child["likeCount"])}
-      </p>
       END_HTML
 
       if child["creatorHeart"]?
@@ -420,13 +419,14 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
         end
 
         html << <<-END_HTML
+          &nbsp;
           <span class="creator-heart-container" title="#{translate(locale, "`x` marked it with a ❤", child["creatorHeart"]["creatorName"].as_s)}">
-              <div class="creator-heart">
+              <span class="creator-heart">
                   <img loading="lazy" class="creator-heart-background-hearted" src="#{creator_thumbnail}" alt="" />
-                  <div class="creator-heart-small-hearted">
-                      <div class="icon ion-ios-heart creator-heart-small-container"></div>
-                  </div>
-              </div>
+                  <span class="creator-heart-small-hearted">
+                      <span class="icon ion-ios-heart creator-heart-small-container"></span>
+                  </span>
+              </span>
           </span>
         END_HTML
       end