feat: apply figma browse mobile redesign

src/components/messageStream/bubbles/ImageBubble.tsx

@@ -6,15 +6,12 @@ export function ImageBubble({ post }: { post: Post }) {
   const { openLightbox } = useLightbox();
   const att = post.attachments[0];
   if (!att) return null;
-  const ratio =
-    att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
-
   return (
-    <div className="relative w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]">
+    <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, undefined, post.id)}
-        className="block w-full"
+        className="block h-full w-full"
         aria-label={att.filename}
       >
         <img
@@ -22,7 +19,6 @@ export function ImageBubble({ post }: { post: Post }) {
           alt={att.filename}
           loading="lazy"
           className="h-full w-full object-cover"
-          style={{ aspectRatio: ratio }}
         />
       </button>
       <AttachmentDownloadPill postId={post.id} attachment={att} />