feat: enable real posts api by default

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -14,24 +14,26 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
     att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
 
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="relative overflow-hidden rounded-xl bg-black/20">
       <button
         type="button"
         onClick={() => openLightbox([att], 0, text, post.id)}
-        className="relative block w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]"
+        className="block w-full"
         aria-label={att.filename}
       >
         <img
           src={att.url}
           alt={att.filename}
           loading="lazy"
-          className="h-full w-full object-cover"
+          className="block h-auto w-full"
           style={{ aspectRatio: ratio }}
         />
       </button>
       {text ? (
-        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
-          {autolink(text)}
+        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/55 to-transparent px-4 pb-4 pt-16 text-[14px] leading-snug text-neutral-100">
+          <div className="whitespace-pre-wrap break-words">
+            {autolink(text)}
+          </div>
         </div>
       ) : null}
     </div>