diff --git a/app/components/media_asset_preview_component.rb b/app/components/media_asset_preview_component.rb
index 3d2a0224c..b3ab94a77 100644
--- a/app/components/media_asset_preview_component.rb
+++ b/app/components/media_asset_preview_component.rb
@@ -5,7 +5,7 @@
 class MediaAssetPreviewComponent < ApplicationComponent
   DEFAULT_SIZE = 180
 
-  attr_reader :media_asset, :size, :link_target, :classes, :html, :save_data
+  attr_reader :media_asset, :size, :link_target, :classes, :inner_classes, :html, :save_data
   delegate :duration_to_hhmmss, :sound_icon, to: :helpers
 
   renders_one :header
@@ -17,12 +17,13 @@ class MediaAssetPreviewComponent < ApplicationComponent
   # @param link_target [ApplicationRecord] What the thumbnail links to (default: the media asset).
   # @param save_data [Boolean] If true, save data by not serving higher quality thumbnails
   #   on 2x pixel density displays. Default: false.
-  def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, classes: [], html: {}, save_data: CurrentUser.save_data)
+  def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, classes: [], inner_classes: [], html: {}, save_data: CurrentUser.save_data)
     super
     @media_asset = media_asset
     @size = size.presence&.to_i || DEFAULT_SIZE
     @link_target = link_target
     @classes = classes
+    @inner_classes = inner_classes
     @html = html
     @save_data = save_data
   end
diff --git a/app/components/media_asset_preview_component/media_asset_preview_component.html.erb b/app/components/media_asset_preview_component/media_asset_preview_component.html.erb
index c657d26d9..304b47bdc 100644
--- a/app/components/media_asset_preview_component/media_asset_preview_component.html.erb
+++ b/app/components/media_asset_preview_component/media_asset_preview_component.html.erb
@@ -1,42 +1,44 @@
 <%= tag.article class: ["media-asset-preview media-asset-preview-#{size}", *classes], **html do -%>
-  <%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
-    <%= header %>
+  <%= tag.div class: inner_classes do %>
+    <%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
+      <%= header %>
 
-    <% if media_asset.nil? %>
-      <div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
-        <%= missing_image || "No image" %>
-      </div>
-    <% elsif media_asset.active? %>
-      <% if media_asset.is_animated? %>
-        <div class="media-asset-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
-          <span class="media-asset-duration align-middle">
-            <%= duration_to_hhmmss(media_asset.duration) %>
-          </span>
+      <% if media_asset.nil? %>
+        <div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
+          <%= missing_image || "No image" %>
+        </div>
+      <% elsif media_asset.active? %>
+        <% if media_asset.is_animated? %>
+          <div class="media-asset-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
+            <span class="media-asset-duration align-middle">
+              <%= duration_to_hhmmss(media_asset.duration) %>
+            </span>
+          </div>
+        <% end %>
+
+        <picture>
+          <% unless save_data %>
+            <% case size %>
+            <% when 150, 180 %>
+              <%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
+            <% when 225, 270, 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: "media-asset-preview-image w-auto h-auto max-h-#{size}px max-w-full", crossorigin: "anonymous", draggable: "false" -%>
+        </picture>
+      <% else %>
+        <div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
+          <% if media_asset.processing? %>
+            <%= spinner_icon(class: "h-8") %>
+          <% elsif media_asset.failed? %>
+            Failed
+          <% else %>
+            Deleted
+          <% end %>
         </div>
       <% end %>
-
-      <picture>
-        <% unless save_data %>
-          <% case size %>
-          <% when 150, 180 %>
-            <%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
-          <% when 225, 270, 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: "media-asset-preview-image w-auto h-auto max-h-#{size}px max-w-full", crossorigin: "anonymous", draggable: "false" -%>
-      </picture>
-    <% else %>
-      <div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
-        <% if media_asset.processing? %>
-          <%= spinner_icon(class: "h-8") %>
-        <% elsif media_asset.failed? %>
-          Failed
-        <% else %>
-          Deleted
-        <% end %>
-      </div>
     <% end %>
   <% end %>
 
diff --git a/app/views/ai_tags/_preview.html.erb b/app/views/ai_tags/_preview.html.erb
index 37ede2758..e843fc092 100644
--- a/app/views/ai_tags/_preview.html.erb
+++ b/app/views/ai_tags/_preview.html.erb
@@ -1,26 +1,17 @@
-<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: media_asset.post || media_asset, classes: "flex flex-col items-center w-full h-full border rounded pb-2", html: { "data-tag-id": ai_tag.tag_id, **data_attributes_for(media_asset) })) do |preview| %>
+<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: media_asset.post || media_asset, classes: "flex flex-col items-center w-full h-full border rounded pb-2", inner_classes: "flex-auto flex items-center", html: { "data-tag-id": ai_tag.tag_id, **data_attributes_for(media_asset) })) do |preview| %>
   <% preview.footer do %>
-    <div class="text-center text-xs flex flex-col px-2 h-full justify-end">
-      <div class="mb-2">
-        <% if media_asset.post.present? %>
-          <div>
-            <%= link_to "post ##{media_asset.post.id}", media_asset.post %>
-            <%= link_to "»", ai_tags_path(search: search_params.merge(media_asset_id: ai_tag.media_asset_id)) %>
-          </div>
-        <% end %>
-
-        <div class="leading-none">
-          <%= link_to ai_tag.tag.pretty_name, ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name)), class: "tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name %>
-          <%= link_to "#{ai_tag.score}%", ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name, score: ">=#{ai_tag.score}")), class: "tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name %>
-        </div>
+    <div class="text-center text-xs leading-none px-2 w-full mt-2">
+      <div class="truncate mb-2">
+        <%= link_to "#{ai_tag.tag.pretty_name}", ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name)), class: "tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name, title: ai_tag.tag.pretty_name %>
+        <%= link_to "#{ai_tag.score}%", ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name, score: ">=#{ai_tag.score}")), class: "block tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name %>
       </div>
 
       <% if ai_tag.post.nil? || !policy(ai_tag).update? %>
         <%= button_to "Add", nil, class: "button-primary button-sm", disabled: true %>
       <% elsif ai_tag.post_tagged? %>
-        <%= button_to "Remove", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "remove" }, class: "button-outline-danger button-sm" %>
+        <%= button_to "Remove", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "remove" }, class: "button-outline-danger button-sm", title: "Remove the tag from the post" %>
       <% else %>
-        <%= button_to "Add", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "add" }, class: "button-primary button-sm" %>
+        <%= button_to "Add", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "add" }, class: "button-primary button-sm", title: "Add the tag to the post" %>
       <% end %>
     </div>
   <% end %>