From ea38503f371020a335182b67fa1c9b2d696e26ed Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sat, 30 May 2026 02:51:09 +0800
Subject: [PATCH] ui(thumbnails): force preview images to fixed ratio

Use object-fill for compact preview thumbnails so rank-list covers and
file previews fill their fixed boxes without cropping or black bars. This
keeps the list layout stable while matching the desired compressed-ratio
thumbnail treatment.
---
 src/components/PopularRankList.tsx            | 28 ++++++-------------
 .../messageStream/bubbles/FileDocBubble.tsx   |  2 +-
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/PopularRankList.tsx b/src/components/PopularRankList.tsx
index 0dc3ccd..0e9e938 100644
--- a/src/components/PopularRankList.tsx
+++ b/src/components/PopularRankList.tsx
@@ -132,26 +132,14 @@ function PopularRankRow({
         }`}
       >
         {cover ? (
-          <>
-            {/* Same image, blurred + scaled, fills the letterbox area so we
-                see the full poster (no crop) without dead black bars. */}
-            <img
-              src={cover}
-              alt=""
-              aria-hidden
-              loading="lazy"
-              decoding="async"
-              className="absolute inset-0 h-full w-full scale-110 object-cover opacity-70 blur-md"
-            />
-            <img
-              src={cover}
-              alt=""
-              loading="lazy"
-              decoding="async"
-              className="relative h-full w-full object-contain"
-              onError={() => setCoverFailed(true)}
-            />
-          </>
+          <img
+            src={cover}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-fill"
+            onError={() => setCoverFailed(true)}
+          />
         ) : (
           <FallbackCover type={r.type} />
         )}
diff --git a/src/components/messageStream/bubbles/FileDocBubble.tsx b/src/components/messageStream/bubbles/FileDocBubble.tsx
index 57c1a42..42837ca 100644
--- a/src/components/messageStream/bubbles/FileDocBubble.tsx
+++ b/src/components/messageStream/bubbles/FileDocBubble.tsx
@@ -47,7 +47,7 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
           loading="lazy"
           decoding="async"
           onError={() => setPreviewFailed(true)}
-          className="h-16 w-16 shrink-0 rounded-lg bg-[#111116] object-contain"
+          className="h-16 w-16 shrink-0 rounded-lg object-fill"
         />
       ) : (
         <div