diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss
index de93bdcb8..ed2bbd9ce 100644
--- a/app/components/post_gallery_component/post_gallery_component.scss
+++ b/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); }
diff --git a/app/components/post_preview_component/post_preview_component.html.erb b/app/components/post_preview_component/post_preview_component.html.erb
index 69c7a3a04..f3395b155 100644
--- a/app/components/post_preview_component/post_preview_component.html.erb
+++ b/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 %>
diff --git a/app/components/post_preview_component/post_preview_component.scss b/app/components/post_preview_component/post_preview_component.scss
index 075939c7d..080901aba 100644
--- a/app/components/post_preview_component/post_preview_component.scss
+++ b/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;