Community: Fix position of the "creator heart" (#3817)

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;

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">
+                  <span class="creator-heart-small-hearted">
-                      <div class="icon ion-ios-heart creator-heart-small-container"></div>
+                      <span class="icon ion-ios-heart creator-heart-small-container"></span>
-                  </div>
+                  </span>
-              </div>
+              </span>
           </span>
         END_HTML
       end