comments: fix video duration not being shown on thumbnails

Fix the video duration not being shown on thumbnails on the
https://danbooru.donmai.us/comments page.

BUG: this introduces duplicate HTML ids on the comments page. Post
thumbnails and post comment containers both have the same html ID.

app/javascript/src/styles/common/messages.scss

@@ -1,9 +1,10 @@
 div.list-of-messages {
   margin: 1em 0;
 
+  > * + * { margin-top: 2em; }
+
   article.message {
     display: flex;
-    margin-top: 2em;
     word-wrap: break-word;
     padding: 5px;
 

app/javascript/src/styles/common/utilities.scss

@@ -68,6 +68,7 @@ $spacer: 0.25rem; /* 4px */
 .align-top { vertical-align: top; }
 .align-middle { vertical-align: middle; }
 
+.flex-1 { flex: 1 1 0%; }
 .flex-auto { flex: 1 1 auto; }
 .items-center { align-items: center; }
 .justify-center { justify-content: center; }

app/javascript/src/styles/specific/comments.scss

@@ -17,18 +17,6 @@ div#c-comments {
     div.post {
       display: flex;
       margin-bottom: 4em;
-
-      div.preview {
-        width: 154px;
-        height: 154px;
-        margin-right: 30px;
-        overflow: hidden;
-        text-align: center;
-      }
-
-      div.comment-section {
-        flex: 1;
-      }
     }
   }
 }

app/views/comments/_index_by_comment.html.erb

@@ -3,12 +3,10 @@
     <% dtext_data = DText.preprocess(@comments.map(&:body)) %>
 
     <% @comments.each do |comment| %>
-      <%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post).article_attrs("post") do %>
-        <div class="preview">
-          <% if policy(comment.post).visible? %>
-            <%= link_to(image_tag(comment.post.preview_file_url), post_path(comment.post)) %>
-          <% end %>
-        </div>
+      <%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post).article_attrs("post space-x-4") do %>
+        <% if policy(comment.post).visible? %>
+          <%= post_preview(comment.post, show_deleted: true) %>
+        <% end %>
 
         <%= render_comment(comment, dtext_data: dtext_data, context: :index_by_comment, current_user: CurrentUser.user) %>
       <% end %>

app/views/comments/_index_by_post.html.erb

@@ -4,12 +4,10 @@
   <% end %>
 
   <% @posts.select(&:visible?).each do |post| %>
-    <%= tag.div id: "post_#{post.id}", **PostPreviewComponent.new(post: post).article_attrs("post") do %>
-      <div class="preview">
-        <%= link_to(image_tag(post.preview_file_url), post_path(post)) %>
-      </div>
+    <%= tag.div id: "post_#{post.id}", **PostPreviewComponent.new(post: post).article_attrs("post space-x-4") do %>
+      <%= post_preview(post, show_deleted: true) %>
 
-      <div class="comment-section">
+      <div class="flex-1">
         <%= render "comments/partials/index/header", post: post %>
         <%= render_comment_section(post, limit: 6, current_user: CurrentUser.user) %>
       </div>

test/functional/comments_controller_test.rb

@@ -31,9 +31,9 @@ class CommentsControllerTest < ActionDispatch::IntegrationTest
           get comments_path(group_by: "post")
 
           assert_response :success
-          assert_select "#post_#{@post.id}", 1
-          assert_select "#post_#{@post.id} .comment", 1
-          assert_select "#post_#{@post.id} .show-all-comments-link", 0
+          assert_select "div#post_#{@post.id}", 1
+          assert_select "div#post_#{@post.id} .comment", 1
+          assert_select "div#post_#{@post.id} .show-all-comments-link", 0
         end
 
         should "not bump posts with nonbumping comments" do