src/components/PopularRankList.tsx

@@ -132,14 +132,26 @@ function PopularRankRow({
         }`}
       >
         {cover ? (
-          <img
+          <>
-            src={cover}
+            {/* Same image, blurred + scaled, fills the letterbox area so we
-            alt=""
+                see the full poster (no crop) without dead black bars. */}
-            loading="lazy"
+            <img
-            decoding="async"
+              src={cover}
-            className="h-full w-full object-cover"
+              alt=""
-            onError={() => setCoverFailed(true)}
+              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)}
+            />
+          </>
         ) : (
           <FallbackCover type={r.type} />
         )}

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 object-cover"
+          className="h-16 w-16 shrink-0 rounded-lg bg-[#111116] object-contain"
         />
       ) : (
         <div