feat: apply figma browse mobile redesign

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -11,31 +11,27 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
   const att = post.attachments[0];
   const text = postDisplayText(post, lang);
   if (!att) return null;
-  const ratio =
-    att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
-
   return (
-    <div className="relative overflow-hidden rounded-xl bg-black/20">
-      <button
-        type="button"
-        onClick={() => openLightbox([att], 0, text, post.id)}
-        className="block w-full"
-        aria-label={att.filename}
-      >
-        <img
-          src={att.url}
-          alt={att.filename}
-          loading="lazy"
-          className="block h-auto w-full"
-          style={{ aspectRatio: ratio }}
-        />
-      </button>
-      <AttachmentDownloadPill postId={post.id} attachment={att} />
+    <div className="flex flex-col">
+      <div className="relative h-[180px] w-full overflow-hidden bg-black min-[440px]:h-[210px] md:h-[260px] lg:h-[300px]">
+        <button
+          type="button"
+          onClick={() => openLightbox([att], 0, text, post.id)}
+          className="block h-full w-full"
+          aria-label={att.filename}
+        >
+          <img
+            src={att.url}
+            alt={att.filename}
+            loading="lazy"
+            className="h-full w-full object-cover"
+          />
+        </button>
+        <AttachmentDownloadPill postId={post.id} attachment={att} />
+      </div>
       {text ? (
-        <div className="bg-gradient-to-b from-ark-panel/90 to-ark-panel px-4 py-3 text-[14px] leading-snug text-neutral-100">
-          <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words">
-            {autolink(text)}
-          </div>
+        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
+          {autolink(text)}
         </div>
       ) : null}
     </div>