posts: bottom align thumbnails; prevent thumbnail reflow.

* Bottom-align thumbnails on desktop. This is so that vote buttons line
  up beneath thumbnails. Also so that pool titles line up on the pool
  gallery page. This is desktop only because it tends to leave large
  gaps above thumbnails on mobile.

* Make thumbnails fixed-height so that the layout doesn't shift as
  thumbnails are loaded.

app/components/post_gallery_component/post_gallery_component.scss

@@ -5,11 +5,8 @@
   }
 
   article.post-preview {
-    width: auto;
-    height: auto;
-    margin: 0 0 0.5rem 0;
+    display: inline-block;
     padding: 0.5rem;
-    overflow: hidden;
     vertical-align: top;
   }
 }
@@ -20,6 +17,19 @@
     gap: 0.5rem;
   }
 
+  .post-preview-container {
+    display: flex;
+    place-items: end;
+  }
+
+  @media screen and (min-width: 660px) {
+    &.post-gallery-150 .post-preview-container { height: 150px; }
+    &.post-gallery-180 .post-preview-container { height: 180px; }
+    &.post-gallery-225 .post-preview-container { height: 225px; }
+    &.post-gallery-270 .post-preview-container { height: 270px; }
+    &.post-gallery-360 .post-preview-container { height: 360px; }
+  }
+
   &.post-gallery-150  .posts-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
   &.post-gallery-180  .posts-container { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
   &.post-gallery-225  .posts-container { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
@@ -29,6 +39,10 @@
   &.post-gallery-360  .posts-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
 
   @media screen and (max-width: 660px) {
+    .posts-container {
+      gap: 0.25rem;
+    }
+
     &.post-gallery-150  .posts-container { grid-template-columns: repeat(2, auto); }
     &.post-gallery-180  .posts-container { grid-template-columns: repeat(2, auto); }
     &.post-gallery-225  .posts-container { grid-template-columns: repeat(2, auto); }

app/components/post_preview_component/post_preview_component.html.erb

@@ -1,33 +1,35 @@
 <%= tag.article id: "post_#{post.id}", **article_attrs do -%>
-  <%= link_to polymorphic_path(link_target, q: tags), class: "post-preview-link" do -%>
-    <% if is_animated? || has_sound? %>
-      <div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
-        <% if is_animated? %>
-          <span class="post-duration align-middle">
-            <%= duration_to_hhmmss(duration) %>
-          </span>
-        <% end %>
-        <% if has_sound? %>
-          <%= sound_icon(class: "h-3 mx-0.5") -%>
-        <% end %>
-      </div>
-    <% end %>
-
-    <picture>
-      <% unless save_data %>
-        <% case size %>
-        <% when "150" %>
-          <%# no-op %>
-        <% when "180" %>
-          <%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
-        <% else # 225 to 360 %>
-          <%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %>
-        <% end %>
+  <div class="post-preview-container">
+    <%= link_to polymorphic_path(link_target, q: tags), class: "post-preview-link" do -%>
+      <% if is_animated? || has_sound? %>
+        <div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
+          <% if is_animated? %>
+            <span class="post-duration align-middle">
+              <%= duration_to_hhmmss(duration) %>
+            </span>
+          <% end %>
+          <% if has_sound? %>
+            <%= sound_icon(class: "h-3 mx-0.5") -%>
+          <% end %>
+        </div>
       <% end %>
 
-      <%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "post-preview-image", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%>
-    </picture>
-  <% end -%>
+      <picture>
+        <% unless save_data %>
+          <% case size %>
+          <% when "150" %>
+            <%# no-op %>
+          <% when "180" %>
+            <%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
+          <% else # 225 to 360 %>
+            <%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %>
+          <% end %>
+        <% end %>
+
+        <%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "post-preview-image", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%>
+      </picture>
+    <% end -%>
+  </div>
   <% if pool -%>
     <p class="desc">
       <%= link_to pool.pretty_name.truncate(80), pool %>

app/components/post_preview_component/post_preview_component.scss

@@ -1,15 +1,10 @@
 @import "../../javascript/src/styles/base/000_vars.scss";
 
 article.post-preview {
-  display: inline-flex;
-  flex-direction: column;
-  place-items: center;
-  position: relative;
-  overflow: hidden;
-
   .post-preview-link {
-    display: inline-block;
+    display: block;
     position: relative;
+    margin: 0 auto;
 
     .post-animation-icon {
       color: var(--preview-icon-color);
@@ -17,21 +12,6 @@ article.post-preview {
     }
   }
 
-  &.captioned {
-    height: auto;
-    vertical-align: text-top;
-  }
-
-  &.post-preview-fit-fixed {
-    &.post-preview-150  { min-width: 150px; min-height: 150px; }
-    &.post-preview-180  { min-width: 180px; min-height: 180px; }
-    &.post-preview-225  { min-width: 225px; min-height: 225px; }
-    &.post-preview-225w { min-width: 225px; min-height: 360px; }
-    &.post-preview-270  { min-width: 270px; min-height: 270px; }
-    &.post-preview-270w { min-width: 270px; min-height: 360px; }
-    &.post-preview-360  { min-width: 360px; min-height: 360px; }
-  }
-
   .desc {
     font-size: var(--text-sm);
     margin-bottom: 0;
@@ -44,11 +24,28 @@ article.post-preview {
   height: auto;
 }
 
-@media screen and (min-width: 660px) {
-  .post-preview-225 .post-preview-image { max-height: 225px; width: auto; }
-  .post-preview-270 .post-preview-image { max-height: 270px; width: auto; }
+.post-preview-fit-fixed {
+  display: inline-flex;
+  flex-direction: column;
+  place-items: center;
+
+  &.post-preview-150  { width: 150px; }
+  &.post-preview-180  { width: 180px; }
+  &.post-preview-225  { width: 225px; }
+  &.post-preview-225w { width: 225px; }
+  &.post-preview-270  { width: 270px; }
+  &.post-preview-270w { width: 270px; }
+  &.post-preview-360  { width: 360px; }
 }
 
+.post-preview-150  .post-preview-image { max-height: 150px; width: auto; }
+.post-preview-180  .post-preview-image { max-height: 180px; width: auto; }
+.post-preview-225  .post-preview-image { max-height: 225px; width: auto; }
+.post-preview-225w .post-preview-image { max-height: 360px; width: auto; }
+.post-preview-270  .post-preview-image { max-height: 270px; width: auto; }
+.post-preview-270w .post-preview-image { max-height: 360px; width: auto; }
+.post-preview-360  .post-preview-image { max-height: 360px; width: auto; }
+
 .post-preview {
   img {
     border: 2px solid transparent;