src/components/messageStream/MessageBubble.tsx

@@ -35,7 +35,7 @@ export function MessageBubble({ post }: { post: Post }) {
   return (
     <div
       id={`post-${post.id}`}
-      className="mx-auto w-full max-w-[358px] scroll-mt-20 md:max-w-[680px] md:scroll-mt-24 lg:max-w-[900px] xl:max-w-[1120px]"
+      className="mx-auto w-full max-w-[358px] scroll-mt-[82px] md:max-w-[680px] md:scroll-mt-[98px] lg:max-w-[900px] xl:max-w-[1120px]"
     >
       <article
         className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -33,8 +33,20 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
     }
   };
 
+  const isImage = att.kind === "image" || att.mime.startsWith("image/");
+  const previewUrl =
+    att.thumbnailUrl ?? att.posterUrl ?? (isImage ? att.url : undefined);
+
   return (
     <div className="group flex h-[52px] items-center gap-3">
+      {previewUrl ? (
+        <img
+          src={previewUrl}
+          alt={displayFilename}
+          loading="lazy"
+          className="h-[52px] w-[52px] shrink-0 rounded-full object-cover"
+        />
+      ) : (
         <div
           className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
           style={{ backgroundColor: color }}
@@ -42,6 +54,7 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
         >
           <Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
         </div>
+      )}
       <div className="min-w-0 flex-1">
         <div
           className="truncate text-[15px] font-medium leading-6 text-ark-gold group-hover:text-ark-gold2"