From 7aac401407627fef167b2d0f5bb3dd2324de6a1c Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Sat, 6 May 2023 19:23:55 +0200
Subject: [PATCH 1/3] CSS: limit width of the comments in community tab

---
 assets/css/default.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/assets/css/default.css b/assets/css/default.css
index 42f6958f..4d06b77f 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -321,6 +321,16 @@ p.channel-name { margin: 0; }
 p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
 
 
+/*
+ * Comments & community posts
+ */
+
+#comments {
+  max-width: 800px;
+  margin: auto;
+}
+
+
 /*
  * Footer
  */

From ce2649420fb868596bd926393fb1073d2671a4f5 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Sat, 6 May 2023 19:36:52 +0200
Subject: [PATCH 2/3] CSS: Fix iframe attachment size in community posts

---
 assets/css/default.css    | 14 ++++++++++++++
 src/invidious/comments.cr | 18 +++++-------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 4d06b77f..23649f8f 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -330,6 +330,20 @@ p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
   margin: auto;
 }
 
+.video-iframe-wrapper {
+  position: relative;
+  height: 0;
+  padding-bottom: 56.25%;
+}
+
+.video-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
 
 /*
  * Footer
diff --git a/src/invidious/comments.cr b/src/invidious/comments.cr
index ec4449f0..f43e39c6 100644
--- a/src/invidious/comments.cr
+++ b/src/invidious/comments.cr
@@ -372,27 +372,19 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
           </div>
           END_HTML
         when "video"
-          html << <<-END_HTML
-            <div class="pure-g">
-              <div class="pure-u-1 pure-u-md-1-2">
-                <div style="position:relative;width:100%;height:0;padding-bottom:56.25%;margin-bottom:5px">
-          END_HTML
-
           if attachment["error"]?
             html << <<-END_HTML
+            <div class="pure-g video-iframe-wrapper">
               <p>#{attachment["error"]}</p>
+            </div>
             END_HTML
           else
             html << <<-END_HTML
-              <iframe id='ivplayer' style='position:absolute;width:100%;height:100%;left:0;top:0' src='/embed/#{attachment["videoId"]?}?autoplay=0' style='border:none;'></iframe>
+            <div class="pure-g video-iframe-wrapper">
+              <iframe class="video-iframe" src='/embed/#{attachment["videoId"]?}?autoplay=0'></iframe>
+            </div>
             END_HTML
           end
-
-          html << <<-END_HTML
-                </div>
-              </div>
-            </div>
-          END_HTML
         else nil # Ignore
         end
       end

From 720789b6221518fd1614debfcee794a422df9466 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Sat, 6 May 2023 19:41:07 +0200
Subject: [PATCH 3/3] HTML: wrap comments metadata in a paragraph

---
 src/invidious/comments.cr | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/invidious/comments.cr b/src/invidious/comments.cr
index f43e39c6..01556099 100644
--- a/src/invidious/comments.cr
+++ b/src/invidious/comments.cr
@@ -390,6 +390,7 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
       end
 
       html << <<-END_HTML
+      <p>
         <span title="#{Time.unix(child["published"].as_i64).to_s(translate(locale, "%A %B %-d, %Y"))}">#{translate(locale, "`x` ago", recode_date(Time.unix(child["published"].as_i64), locale))} #{child["isEdited"] == true ? translate(locale, "(edited)") : ""}</span>
         |
       END_HTML
@@ -408,6 +409,7 @@ 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"]?